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

启动

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

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

加载全局路由./router
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> ); }
*
权限过滤

过滤权限文件：./utils/Authorized.js
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
// 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); }

• « 上一篇：使用create-react-app方式引入antd样式
• » 下一篇：软件技术架构演变历史