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" />)
}
}