尝试 React16、React-router4 实现根据动态菜单生成按需加载的路由

1. 因为 react-router4 没有在提供 onEnter 这样的全局跳转钩子，所以要通过 高阶组件 去处理 来实现一个 路由守卫

2. 按需加载这里我同样使用 高阶组件 来实现

3. 登录成功时 要先获取用户菜单保存到redux中，在登录状态下，刷新页面需要重新获取菜单，并保存到redux中，方便在路由守卫中直接从redux中拿到菜单数据来填充进主体页面路由文件中去。

ps: 只在这里记录一下尝试的核心代码部分，实际效果可在  github  上克隆代码后 运行项目查看

一、路由守卫   

守卫 routerComponent.js相关代码

import React, { Component } from 'react';

import { Route, Redirect } from 'react-router-dom';

import { renderRoutes } from 'react-router-config';

import {asyncComponent as async} from '@/utils/asyncComponent.js';

import store from '@/store/index';

import Main from '@/router/main';


class RouterAuth extends Component {
    constructor(props) {
        super(props);

        this.state = {

        };
    }

    //根据菜单生成路由文件
    handleRouters(menu){
        let childRouter = [];
        menu.forEach((item) => {
            if(!!item.childs){
                childRouter = [...childRouter, ...this.handleRouters(item.childs)];
            }else{
                let component = item.component;
                let path = item.path;
                //根据es6module语法，由于import是静态执行，所以不能使用表达式和变量，
                //解决方法 es6模板字符串 import(`./path/${myFile}.jsx`)。
                // 注意：
                // ${myFile}变量前边一定要写一个带"/"的字符串。
                // ".jsx" 不能写在变量里，要写在字符串里。
                //目前只能一个页面对应一个js，如何按模块对应js？
                item.component = async(()=>import(/* webpackChunkName: "[request]" */ `@/${component}.jsx`));
                return childRouter.push(item)
            }
        })
        return childRouter
    }

    render() {
        let { location, config } = this.props;
        let { pathname } = location;
        console.log(location, config, pathname)

        let token = localStorage.getItem('token');

        let targetRouterConfig = config.find((item) => item.path === pathname);


        //如果是登录状态
        if(!!token){
            //如果进入登录页面，则直接重定向至首页
            if(pathname === '/login' || pathname === '/'){
                return <Redirect to='/home' />
            }else{
                //如果路由存在
                if(targetRouterConfig){
                    //如果是需要登录的或者是404页面则直接进入
                    if(targetRouterConfig.auth || pathname === '/404'){
                        let { component } = targetRouterConfig;
                        return <Route exact path={pathname} component={component} />
                    }else{//否则重定向到首页
                        return <Redirect to='/home' />
                    }
                }else{
                    //判断没有设置权限菜单，则根据菜单设置上
                    if(Main[0].routes.length == 0){
                        let menu = store.getState().user.menu;
                        let menus = this.handleRouters(menu);
                        Main[0].routes = menus;
                    }
                    //如果菜单中包含当前路由，则进入
                    let menuConfig = Main[0].routes.filter((item) => {
                        return item.path === pathname
                    });
                    if(menuConfig.length != 0){
                        return renderRoutes(Main);
                    }else{//不包含则进入404
                        return <Redirect to='/404' />
                    }

                }
            }
        }else{ //非登录状态
            //如果路由存在
            if(targetRouterConfig){
                //如果需要登录，则跳转到登录页
                if(targetRouterConfig.auth){
                    return <Redirect to='/login' />
                }else{//不需要登录，则正常进入
                    let { component } = targetRouterConfig;
                    return <Route exact path={pathname} component={component} />
                }
            }else{
                //路由不存在，直接进入登录页
                return <Redirect to='/login' />
            }
        }
    }
}

export default RouterAuth;

   路由 index.js文件代码

import React from 'react';

import { HashRouter, Switch, Route, Redirect } from "react-router-dom";

import RouterAuth from '@/utils/routerComponent';

/*
HashRouter
1.用这个了就代表路径加上/#/
2.换成BrowserRouter了；路径就不需要加/#/
3.用HashRouter了就要把path的路径名字带上，如果首次加载默认的话要这样写： <Route exact path="/"  component={App}/>
*/

import Login from './login';

import Main from './main';

import NotFound from './notFound';

const routes = [
    ...Login,
    ...NotFound
];

const BasicRoute = () => (
    <HashRouter>
        <Switch>
            <RouterAuth config={routes}></RouterAuth>
        </Switch>
    </HashRouter>
);

export default BasicRoute;

  

二、按需加载

按需加载 asyncComponent.js 代码

import React from 'react'

export const asyncComponent = loadComponent => (
    class AsyncComponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                Component: null
            }
        }

        UNSAFE_componentWillMount() {
            if (this.hasLoadedComponent()) {
                return
            }

            loadComponent()
                .then(module => module.default)
                .then((Component) => {
                    this.setState({Component})
                })
                .catch((err) => {
                    console.error(`Cannot load component in <AsyncComponent />`);
                    throw err
                })
        }

        hasLoadedComponent() {
            return this.state.Component !== null
        }

        render() {
            const {Component} = this.state;
            return (Component) ? <Component {...this.props} /> : null
        }
    }
)

 

三、获取菜单相关

登录成功时代码

//登录
    onFinish = (values) => {
        api.login(values).then((result) => {
            //登录成功后需要先获取下菜单，然后在跳转至主页
            //获取个人信息与系统菜单
            common.getMenu().then((res) => {
                if(res.success){
                    store.dispatch({
                        type: 'USER_MENU',
                        data: res.data.menu
                    })
                    localStorage.setItem('token', result.token);
                    this.props.history.push('/home');
                }
            })
        })
    }

刷新页面时代码

//如果是登录状态，则刷新页面时需先获取到菜单后才能挂载路由页面
let token = localStorage.getItem('token');
if(!!token){
    //获取个人信息与系统菜单
    api.getMenu().then((res) => {
        if(res.success){
            store.dispatch({
                type: 'USER_MENU',
                data: res.data.menu
            })

            ReactDOM.render(
                <Router />,
                document.getElementById('root')
            );
        }
    })
}else{
    ReactDOM.render(
        <Router />,
        document.getElementById('root')
    );
}