React Router 4 0 實現路由守衛

在使用 vue 或者 angular 的時候，框架提供了路由守衛功能，用來在進入某個路有前進行一些校驗工作，如果校驗失敗，就跳轉到 404 或者登陸頁面，比如 vue 中的beforeenter函式：

...
router.beforeeach(async(to, from, next) => )
...

在之前的版本中，react router 也提供了類似的onenter鉤子，但在 react router 4.0 版本中，取消了這個方法。react router 4.0 採用了宣告式的元件，路由即元件，要實現路由守衛功能，就得我們自己去寫了。

如果不使用路由守衛，router 元件是這樣子的：

import * as react from 'react';
import  from 'react-router-dom';
import  from '../pages/home/home.page';
import  from '../pages/login/login.page';
import  from '../pages/error/error.page';
export const router = () => (
);

上面的 router 元件，包含了三個頁面：

以及四個路由：

其中，根路由和/home路由，都定向到了主頁路由。

以上是乙個基本的路由定義，可以在登陸/主頁和 404 頁面之間來回跳轉，但也有一些問題：

現在，我們想完成這樣的功能：

要完成這個功能，有兩種方案：

第一種方式，實現起來比較簡單，但有很多的**量，這裡主要介紹第二種方式。

在 react router 4.0 中，沒有再像之前的版本那樣，提供onenter這樣的全域性跳轉鉤子，因此要通過高階元件的方式去處理。

下面是我的實現方式，首先，準備乙份路由表，包含了路由的位址，元件以及是否需要許可權校驗：

import  from '../pages/home/home.page';
import  from '../pages/login/login.page';
import  from '../pages/error/error.page';
inte***ce routerconfigmodel 
export const routerconfig:routerconfigmodel = [
,,,];

將auth設定為true，表示該路由需要許可權校驗。

然後，定義router元件，該元件是經過高階元件包裝後的結果：

import * as react from 'react';
import  from 'react-router-dom';
import  from '../components/frontend-auth/frontend-auth.component'
import  from './router.config'
export class router extends react.component
}

所有的路由跳轉，都交給frontendauth高階元件**完成。下面是frontendauth元件的實現：

import * as react from 'react';
import  from 'react-router-dom';
import  from './frontend-auth.model'
export class frontendauth extends react.component = this.props;
const  = location;
const islogin = localstorage.getitem('__config_center_token')
// 如果該路由不用進行許可權校驗，登入狀態下登陸頁除外
// 因為登陸後，無法跳轉到登陸頁
// 這部分**，是為了在非登陸狀態下，訪問不需要許可權校驗的路由
const targetrouterconfig = config.find((v:any) => v.path === pathname);
if(targetrouterconfig && !targetrouterconfig.auth && !islogin) = targetrouterconfig;
return }
if(islogin)elseelse
}}elseelse}}
}

以及對應的 model：

export inte***ce propsmodel

頁面上的路由跳轉，都由frontendauth高階元件**了，在switch元件內部，不再是route元件，而只有乙個frontendauth元件。

frontendauth元件接收乙個名為config的props，這是乙份路由表。同時，由於frontendauth元件放在了switch元件內部，react router 還自動為frontendauth注入了location屬性，當位址列的路由發生變化時，就會觸發location屬性物件上的pathname屬性發生變化，從而觸發frontendauth的更新（呼叫render函式）。

frontendauth的render函式中，根據pathname查詢到路由表中的相關配置，如果該配置中指定了無需校驗，就直接返回相應的route元件。

如果查詢到的配置需要進行校驗，再根據是否登陸進行處理，具體可以檢視**中的注釋。

總結一下，實現路由守衛需要考慮到以下的問題：

未登入情況下，訪問不需要許可權校驗的合法頁面：允許訪問

登陸情況下，訪問登陸頁面：禁止訪問，跳轉至主頁

登陸情況下，訪問除登陸頁以外的合法頁面：允許訪問

登陸情況下，訪問所有的非法頁面：禁止訪問，跳轉至 404

未登入情況下，訪問需要許可權校驗的頁面：禁止訪問，跳轉至登陸頁

未登入情況下，訪問所有的非法頁面：禁止訪問，跳轉至 404

注，上面的frontendauth高階元件，實際上是乙個**型的高階元件，這部分內容可以檢視我的這篇文章。

完。

React Router 4 0 實現路由守衛

react router4 0實現登入攔截

react router 4 0 公升級攻略

40 用棧實現佇列

React Router 4 0 實現路由守衛

react router4 0實現登入攔截

react router 4 0 公升級攻略

40 用棧實現佇列

相關推薦