umi权限路由_umijs实现权限路由
先吐槽一句,自己的网站被公司的网络限制给封了,我也是无语了。最近在学习umijs,umijs就不多做介绍了,跟着官方api走了一遍demo,遇到最折磨我的问题 (.umirc.js配置错误) 是权限路由,加上也在梳理react中权限路由和嵌套路由,索性就一起梳理一下。个人感觉react中的权限路由确实没有vue中的路由拦截好用(vue封装的比较全),但是react好像也是为了使用户能够更加自由,所
先吐槽一句,自己的网站被公司的网络限制给封了,我也是无语了。
最近在学习umijs,umijs就不多做介绍了,跟着官方api走了一遍demo,遇到最折磨我的问题 (.umirc.js配置错误) 是权限路由,加上也在梳理react中权限路由和嵌套路由,索性就一起梳理一下。
个人感觉react中的权限路由确实没有vue中的路由拦截好用(vue封装的比较全),但是react好像也是为了使用户能够更加自由,所以就牺牲了方便,总之方便和自由不能完全满足。
在umijs中使用权限控制有两种形式:
以下只列出了相关的部分,全部配置请移步
https://github.com/majiang666/umijs
一:在路由中配置权限路由
.umirc.js
export default {
history: 'hash',
routes:[
{
path:'/',
component:'./index',
Routes: ['./src/routes/PrivateRoute.js'],
}
]
}
PrivateRoute.js
import { Route, Redirect } from 'dva/router';
const AuthRouter = (props) => {
const { route } = props;
const { component:Component } = route;
return (
//true ? :
//这个也可以,跟下边的二选一,否则会报错
{
console.log(props);
return false ? :
}} />
)
}
export default AuthRouter;
二:在运行时配置路由
渲染应用之前做权限校验,不通过则跳转到登录页
src/app.js
import router from 'umi/router';
export function render(oldRender) {
if(false){
oldRender();
}else{
router.push('/login')
oldRender();
}
}
欢迎关注小程序,感谢您的支持!
更多推荐
所有评论(0)