新增了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 (
      <Route
        {...rest}
        render={(props) => {
          // 根据用户权限，结合即将要访问的页面，判断是否渲染
          const { pathname } = props.location;
          if (pathname === '/exception/500') {
            // 这里，用户永远无法访问500页面
            return <Redirect to="/exception/403" />; 
          }
          // 在此可以检验登录状态，强制要求用户先登录
          return (login && login.status === 'ok')
            ? <Component {...props} {...rest} />
            : <Redirect to="/user/login" />;
        }}
      />
    );
  }
}

如何使用：

<Router history={history}>
  <Switch>
    <Route path="/user" component={UserLayout} />
    <AuthorizedRoute path="/" component={BasicLayout} />
    <Redirect to="/" />
  </Switch>
</Router>

需要注意的地方：

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

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

个人理解：

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