新增了AuthorizedRoute组件,用于校验登录状态与用户权限

转载:https://github.com/ant-design/ant-design-pro/pull/91

如题,新增了AuthorizedRoute组件,利用react-router4的自定义路由功能,创建了一个具有权限校验功能的Router,O(∩_∩)O非常感谢。

全部代码如下:

import React, { PureComponent } from 'react';
import { Route, Redirect } from 'dva/router';
import { connect } from 'dva';

@connect(({ login }) => ({
  login,
}))
export default class BasicLayout extends PureComponent {
  render() {
    const { component: Component, login, ...rest } = this.props;
    return (
       {
          // 根据用户权限,结合即将要访问的页面,判断是否渲染
          const { pathname } = props.location;
          if (pathname === '/exception/500') {
            // 这里,用户永远无法访问500页面
            return ; 
          }
          // 在此可以检验登录状态,强制要求用户先登录
          return (login && login.status === 'ok')
            ? 
            : ;
        }}
      />
    );
  }
}
如何使用:

  
    
    
    
  

需要注意的地方:

  1. 校验用户权限存在异步处理过程时,只需要将校验结果保存,就可以只进行一次判断,以后直接跳转。
  2. 如需取消权限,只要修改redux即可。
  3. 如果需要对加载中状态做出反应,可以先重定向到Loading页面,等校验通过,会自动跳转到正常页面。

像正常Router组件一样使用即可。


个人理解:

所谓的权限是:用户拥有哪些路由,从而拥有哪些视图组件。


你可能感兴趣的:(React)