极客react之Ant Design Pro系列快速入门（一）--启动篇

启动

1. 启动文件： app/src/index.js

   加载全局数据模型./models/global

   加载全局路由./router

   [code]import React from 'react';
   import { routerRedux, Route, Switch } from 'dva/router';
   import { LocaleProvider } from 'antd';
   import zhCN from 'antd/lib/locale-provider/zh_CN';
   import { getRouterData } from './common/router';
   import Authorized from './utils/Authorized';
   import { getQueryPath } from './utils/utils';
   
   const { ConnectedRouter } = routerRedux;
   const { AuthorizedRoute } = Authorized;
   // 全局路由配置
   function RouterConfig({ history, app }) {
   const routerData = getRouterData(app);
   const UserLayout = routerData['/user'].component;
   const BasicLayout = routerData['/'].component;
   return (
   <LocaleProvider locale={zhCN}>
   <ConnectedRouter history={history}>
   <Switch>
   <Route path="/user" component={UserLayout} />
   <!-- 路由权限过滤，如果不是角色或admin或user则重定向/user/login路由 -->
   <AuthorizedRoute
   path="/"
   render={props => <BasicLayout {...props} />}
   authority={['admin', 'user']}
   redirectPath={getQueryPath('/user/login', {
   redirect: window.location.href,
   })}
   />
   </Switch>
   </ConnectedRouter>
   </LocaleProvider>
   );
   }

2. 权限过滤

   过滤权限文件：./utils/Authorized.js

   [code] import RenderAuthorized from '../components/Authorized';
   import { getAuthority } from './authority';
   
   let Authorized = RenderAuthorized(getAuthority()); // eslint-disable-line
   
   // Reload the rights component
   const reloadAuthorized = () => {
   Authorized = RenderAuthorized(getAuthority());
   };
   
   export { reloadAuthorized };
   export default Authorized;

   获取权限文件:./utils/authority.js

   [code] // use localStorage to store the authority info, which might be sent from server in actual project.
   // 重写该方法实现路由权限调整
   export function getAuthority() {
   // return localStorage.getItem('antd-pro-authority') || ['admin', 'user'];
   // 如果没有权限登录默认guest权限进入登录界面
   let authority = localStorage.getItem('antd-pro-authority') || 'guest';
   return authority;
   }
   
   export function setAuthority(authority) {
   return localStorage.setItem('antd-pro-authority', authority);
   }