react路由守衛(wèi)的實現(xiàn)(路由攔截)

更新時間：2021年08月06日 09:02:02 作者：bright1688

react不同于vue，通過在路由里設(shè)置meta元字符實現(xiàn)路由攔截。本文就詳細的介紹一下，具有一定的參考價值，感興趣的小伙伴們可以參考一下

react不同于vue，通過在路由里設(shè)置meta元字符實現(xiàn)路由攔截。在使用 Vue ，框架提供了路由守衛(wèi)功能，用來在進入某個路有前進行一些校驗工作，如果校驗失敗，就跳轉(zhuǎn)到 404 或者登陸頁面，比如 Vue 中的 beforeEnter 函數(shù)：

...
router.beforeEach(async(to, from, next) => {
    const toPath = to.path;
    const fromPath = from.path;
})
...

react實現(xiàn)路由攔截的基本思路還是利用Route 的render函數(shù)。通過判斷攔截條件來實現(xiàn)不同的組件的跳轉(zhuǎn)，從而實現(xiàn)攔截。在之前的版本中，React Router 也提供了類似的 onEnter 鉤子，但在 React Router 4.0 版本中，取消了這個方法。React Router 4.0 以后采用了聲明式的組件，路由即組件，要實現(xiàn)路由守衛(wèi)功能，就得我們自己去寫了。
如果不使用路由守衛(wèi)，Router 組件是這樣子的：

import * as React from 'react';
import { HashRouter,Switch,Route,Redirect } from 'react-router-dom';
 
import Index from "./page/index";
import Home from "./page/home";
import ErrorPage from "./page/error";
import Login from "./page/login";
 
export const Router = () => (
    <HashRouter>
        <Switch>
            <Route path="/" exact component={Index}/>
            <Route path="/login" exact component={Login}/>
            <Route path="/home" exact component={Home}/>
            <Route path="/404" exact component={ErrorPage}/>
            <Redirect to="/404" />
        </Switch>
    </HashRouter>
);

上面的 Router 組件，包含了三個頁面：

登陸
主頁
404 頁面
以及四個路由：
根路由
登陸路由
主頁路由
404 路由
其中，根路由和 /home 路由，都定向到了主頁路由。
以上是一個基本的路由定義，可以在登陸/主頁和 404 頁面之間來回跳轉(zhuǎn)，但也有一些問題：
非登陸狀態(tài)下，可以直接跳轉(zhuǎn)到主頁
登陸狀態(tài)下，也可以輸入 /login 路由跳轉(zhuǎn)到登錄頁
現(xiàn)在，我們想完成這樣的功能：
非登陸狀態(tài)下，無法直接跳轉(zhuǎn)到主頁，如果在非登陸狀態(tài)下進行主頁跳轉(zhuǎn)，需要重定向至登陸路由
登陸狀態(tài)下，無法跳轉(zhuǎn)至登錄頁，如果在登陸狀態(tài)下進行登陸頁跳轉(zhuǎn)，需要重定向至主頁路由
要完成這個功能，有兩種方案：
在每個組件中，根據(jù) props 上的 history 對象來進行跳轉(zhuǎn)
進行全局的路由守衛(wèi)處理

首先在跟目錄src下創(chuàng)建一個routerMap.js文件，代碼如下：
將 auth 設(shè)置為 true，表示該路由需要權(quán)限校驗。

/**
 * 定義路由組件，將 auth 設(shè)置為 true，表示該路由需要權(quán)限校驗
 */

import Admin from "./pages/Admin";
import Login from "./pages/Login";
import Error from "./pages/Error";

export const routerMap = [
    {path: "/", name: "admin", component: Admin, auth: true},
    {path: "/login", name: "Login", component: Login},
    {path: "/error", name: "error", component: Error},
];

所有的路由跳轉(zhuǎn)，都交給 FrontendAuth 高階組件代理完成。下面是 FrontendAuth.js 組件的實現(xiàn)：

/**
 * 路由守衛(wèi)校驗
 */
import React, {Component} from "react";
import {Route, Redirect} from "react-router-dom";

class FrontendAuth extends Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props);
    }

    render() {
        const {routerConfig, location} = this.props;
        const {pathname} = location;
        const isLogin = localStorage.getItem("user");
        console.log(pathname, isLogin);
        console.log(location);
        // 如果該路由不用進行權(quán)限校驗，登錄狀態(tài)下登陸頁除外
        // 因為登陸后，無法跳轉(zhuǎn)到登陸頁
        // 這部分代碼，是為了在非登陸狀態(tài)下，訪問不需要權(quán)限校驗的路由
        const targetRouterConfig = routerConfig.find(
            (item) => item.path === pathname
        );
        console.log(targetRouterConfig);
        if (targetRouterConfig && !targetRouterConfig.auth && !isLogin) {
            const {component} = targetRouterConfig;
            return <Route exact path={pathname} component={component}/>;
        }
        if (isLogin) {
            // 如果是登陸狀態(tài)，想要跳轉(zhuǎn)到登陸，重定向到主頁
            if (pathname === "/login") {
                return <Redirect to="/"/>;
            } else {
                // 如果路由合法，就跳轉(zhuǎn)到相應的路由
                if (targetRouterConfig) {
                    return (
                        <Route path={pathname} component={targetRouterConfig.component}/>
                    );
                } else {
                    // 如果路由不合法，重定向到 404 頁面
                    return <Redirect to="/error"/>;
                }
            }
        } else {
            // 非登陸狀態(tài)下，當路由合法時且需要權(quán)限校驗時，跳轉(zhuǎn)到登陸頁面，要求登陸
            if (targetRouterConfig && targetRouterConfig.auth) {
                return <Redirect to="/login"/>;
            } else {
                // 非登陸狀態(tài)下，路由不合法時，重定向至 404
                return <Redirect to="/error"/>;
            }
        }
    }
}

export default FrontendAuth;

然后，定義 Router 組件，在App.js中，該組件是經(jīng)過高階組件包裝后的結(jié)果：

import './App.less';
import React, {Fragment} from "react";
import {Switch} from 'react-router-dom'
import FrontendAuth from "./FrontendAuth";
import {routerMap} from "./routerMap";

function App() {
    return (
        <Fragment>
            {/*只匹配一個，匹配成功就不往下匹配，效率高*/}
            <Switch>
                <FrontendAuth routerConfig={routerMap}/>
            </Switch>
        </Fragment>
    );
}

export default App;

測試