umijs实现权限路由

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

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

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

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

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

https://github.com/majiang666/umijs

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

react router4.0实现登录拦截

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();
    }
}

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