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

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

发布时间：2018-08-13 10:25,

浏览次数：924

, 标签：

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 (

render={props => } authority={['admin', 'user']}

redirectPath={getQueryPath('/user/login', { redirect: window.location.href, })}

/>

); }

*

权限过滤

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