嘗試 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')
    );
}