博客

// 路由监听
export const RouterGuards = (history) => {
    // history.block 使用方法参考
    // https://stackoverflow.com/questions/65526447/react-router-v5-2-blocking-route-change-with-createbrowserhistory-and-history
    // history.block 从回调中返回 false 会阻止通过，返回 true 允许通过。
    history.block((location, action) => { // 路由拦截 路由守卫        
        const info = auth.getUserInfo()
        if (!info) { // 没登录/没有权限/路由权限校验
            console.warn('没有登录', location);
            checkLogin()
            return false
        } else { // 校验是否拥有该路由权限
            let hasRouterAuth = checkAuth(location, 'router')
            if (!hasRouterAuth) {
                console.warn('没有目标路由权限', location);
                return false
            } else {
                // console.warn('有目标路由权限', location);
                return true
            }
        }
    })
}

其中 RouterGuards 的入参 history 来自

// index.js
import dva from 'dva';
import 'antd/dist/antd.css';
import './permission'

// 1. Initialize
const app = dva()

// 3. Model
// app.model(require('./models/example').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

// router.js
import React from 'react';
import dynamic from 'dva/dynamic'
import { Router, Route, Switch } from 'dva/router';
import { checkLogin, RouterGuards } from './permission'

import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

// import { HashRouter as Router, Route } from 'react-router-dom'
import CacheRoute, { CacheSwitch } from 'react-router-cache-route'

import Welcome from 'widget/Layout/Welcome/WelcomeView'
function RouterConfig({ history, app }) {
    checkLogin() // 校验登录
    RouterGuards(history) // 监听路由
    
    const App = dynamic({
        app,
        models: () => [ import('./widget/Layout/App/AppMod') ],
        component: () => import('./widget/Layout/App/AppView')
    });
    const NotFound = dynamic({
        app,
        component: () => import('./pages/404')
    });
    const PageList = dynamic({ // 渲染页面
        app,
        models: () => [ import('./pages/PageList/PageListMod') ],
        component: () => import('./pages/PageList/PageList')
    })

    return (
        <ConfigProvider locale={zhCN}>
            <Router history={history}>
                <CacheSwitch>
                    <Route exact path="/login" component={Login} />
                    <Route path='/' component={() => (
                        <App history={history}>
                            <CacheSwitch>
                                <Route path="/" exact component={Welcome} />
                                <Route path="/PageList" exact component={PageList} />

                                <Route component={NotFound} />
                            </CacheSwitch>
                        </App>
                    )}></Route>
                    <Route component={NotFound} />
                </CacheSwitch>
            </Router>
        </ConfigProvider>
    );
}

export default RouterConfig;

其中 版本说明

	"dva": "2.4.1"
	"react-router": "4.3.1"
    "react-router-dom": "^4.1.2",