umijs实现权限路由

作者: MJ 分类: react 发布时间: 2019-08-15 14:58

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

最近在学习umijs,umijs就不多做介绍了,跟着官方api走了一遍demo,遇到最折磨我的问题 (.umirc.js配置错误) 是权限路由,加上也在梳理react中权限路由和嵌套路由,索性就一起梳理一下。

个人感觉react中的权限路由确实没有vue中的路由拦截好用(vue封装的比较全),但是react好像也是为了使用户能够更加自由,所以就牺牲了方便,总之方便和自由不能完全满足。

在umijs中使用权限控制有两种形式:

以下只列出了相关的部分,全部配置请移步

https://github.com/majiang666/umijs

一:在路由中配置权限路由

https://umijs.org/zh/guide/router.html#%E6%9D%83%E9%99%90%E8%B7%AF%E7%94%B1

.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 ? <Route {...route} /> : <Redirect to="/login" />
    //这个也可以,跟下边的二选一,否则会报错 

    <Route render={ props => {
      console.log(props);
      return false ? <Component { ...props } /> : <Redirect to="/login" />
    }} />
  )
}

export default AuthRouter;

二:在运行时配置路由

https://umijs.org/zh/guide/runtime-config.html

https://github.com/umijs/umi/issues/1051

渲染应用之前做权限校验,不通过则跳转到登录页

src/app.js

import router from 'umi/router';
export function render(oldRender) {
    if(false){
        oldRender();
    }else{
        router.push('/login')
        oldRender();
    }
}

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

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注