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

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

}

}

欢迎关注小程序,感谢您的支持!

Logo

前往低代码交流专区

更多推荐