当前位置: 首页 > 工具软件 > umi > 使用案例 >

umi路由鉴权

苏志
2023-12-01

配置式路由

umi 的权限路由是通过配置路由的 Routes 属性来实现。约定式的通过 yaml 注释添加,配置式的直接配上即可。

比如有以下配置:
routes.js文件:

module.exports = [
  { path: '/application', component: './application/application', Routes: ['./privateRoute.js'] }
];

umi 会用 ./privateRoute.js 来渲染 /application

privateRoute.js文件:

import Redirect from 'umi/redirect'
import Cookies from 'js-cookie'


export default (props) => {

  // 判断是否登录, 即是否有token
  const isLogin = !!Cookies.get('token')
  if (isLogin) {
    // 删除跳转登录之前的页面
    window.sessionStorage.removeItem('from_router')
    return (<div className="auth-router">{ props.children }	</div>)
  } else {
    // 保存跳转登录之前的页面
    const hash = window.location.hash
    const fromRouter = hash ? hash.slice(1) : ''
    window.sessionStorage.setItem('from_router', fromRouter)
    // 跳转登录页面
    return (<Redirect to="/login" />)
  }
}
 类似资料: