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

启动

1. 启动文件： 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>
        );
    }
   

2. 权限过滤

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