umi权限路由_umijs实现权限路由

先吐槽一句，自己的网站被公司的网络限制给封了，我也是无语了。

最近在学习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();

}

}

欢迎关注小程序，感谢您的支持！