當(dāng)今前端框架屬vue和react最為受歡迎。當(dāng)我們需要做一個(gè)前端項(xiàng)目時(shí)，無疑是從這二者之間，選擇一個(gè)你擅長的框架進(jìn)行開發(fā)。當(dāng)然你也可以非常有個(gè)性的選擇其它。不過選擇完之后，就要自己吃自己個(gè)性的苦。

　　我們習(xí)慣性拿這框架去開發(fā)PC端，比如企業(yè)官網(wǎng)，社交網(wǎng)站，電商網(wǎng)站，后臺管理系統(tǒng)等等。絕大部分時(shí)候，我們在開發(fā)一些項(xiàng)目比較大，內(nèi)容比較多的項(xiàng)目時(shí)，順理成章的，我們需要有很多頁面，并使用路由進(jìn)行頁面跳轉(zhuǎn)。此時(shí)，一個(gè)新的問題出現(xiàn)了，如何實(shí)現(xiàn)路由鑒權(quán)?

　　首先我們要搞清楚什么叫路由鑒權(quán)。就是在頁面進(jìn)行路由跳轉(zhuǎn)時(shí)，對當(dāng)前用戶進(jìn)行鑒定，有沒有權(quán)限跳轉(zhuǎn)到目標(biāo)頁面。這種場景其實(shí)很常見，一個(gè)稍微大一點(diǎn)的項(xiàng)目，它不可避免的會(huì)涉及到多用戶，不同角色進(jìn)行使用。甚至就是說，一個(gè)后臺管理系統(tǒng)，如果在不登錄的情況下，你只能看到冰冷的登錄頁。因?yàn)檫@個(gè)系統(tǒng)里面的內(nèi)容太重要也太敏感了。如果不對當(dāng)前用戶進(jìn)行權(quán)限鑒定，任由其查看，太不安全了。

　　正常情況下，我們的路由跳轉(zhuǎn)，都是通過聲明式導(dǎo)航或編程式導(dǎo)航來實(shí)現(xiàn)。如vue中有:

　　react中有:

　　我們在使用這些路由的api時(shí)，基本上就可以實(shí)現(xiàn)各種業(yè)務(wù)需要的頁面跳轉(zhuǎn)。正常情況下，用戶在使用時(shí)，遵循我們定義好的路由規(guī)則，也不會(huì)有什么問題。

　　但是，這世間就是這么奇妙，總有一些非正常情況，讓我們意想不到。如果張三是一個(gè)企業(yè)小職員，他在管理系統(tǒng)中的權(quán)限是只能看到A頁面不能看到B頁面，而李四是他的上級領(lǐng)導(dǎo)，可以看A和B兩個(gè)頁面。有一天，張三跑到李四辦公桌前，和領(lǐng)導(dǎo)談一些事情，無意中看到了李四電腦上的B頁面的內(nèi)容，并被迫記下了B頁面的路由地址?；氐焦の簧虾?，腦海里一直回憶著剛才看到的B頁面，內(nèi)心久久不能平靜，原來咱們這個(gè)系統(tǒng)里，還有這么精彩的內(nèi)容啊!于是張三靈光一閃，抬起顫抖的雙手，在瀏覽器地址欄中輸入B頁面的路由，啪一聲回車，新世界的大門打開了。

　　如果這個(gè)問題不解決，這個(gè)場景不考慮，那就是我們開發(fā)者的不專業(yè)。用戶可以沒有這種場景，但我們不能不解決這種問題。可以不用，但不能沒有。作為開發(fā)者，我們希望，無論用戶是正常操作，還是非正常操作，不該跳轉(zhuǎn)的就不能跳轉(zhuǎn)，不該他看的，我們就是要加上一層遮羞布。

　　目標(biāo)有了，如何去實(shí)現(xiàn)呢?對于vue來說，其實(shí)方案有很多，我們舉其中一例說明即可。

　　在vue中，有個(gè)非常好用的東西叫路由守衛(wèi)，也有人稱導(dǎo)航守衛(wèi)。這個(gè)守衛(wèi)分三類有七個(gè)，并可指定一個(gè)回調(diào)函數(shù)。能在每一次頁面跳轉(zhuǎn)時(shí)，觸發(fā)這個(gè)回調(diào)函數(shù)執(zhí)行，所以我們上述的目標(biāo)就可以借助這個(gè)守衛(wèi)來實(shí)現(xiàn)。其實(shí)vue的路由中還有一個(gè)叫元信息的東西。就是在路由規(guī)則中添加一個(gè)叫meta的屬性。我們可以給這個(gè)meta賦值一個(gè)對象，對象中放一個(gè)屬性叫l(wèi)ogin，如下：

　　這個(gè)元信息，在路由守衛(wèi)中，也是可以拿到的。那么此時(shí)，我們可以在路由守衛(wèi)中去做判斷，如果當(dāng)前要跳轉(zhuǎn)的目標(biāo)頁，它的路由規(guī)則中的login為true值，我們就認(rèn)為這個(gè)目標(biāo)頁面需要路由鑒權(quán)。如果你把當(dāng)前登錄用戶的信息放在了vuex中或其它什么地方，你就可以去獲取它了，獲取后進(jìn)行判斷當(dāng)前用戶是否登錄，并且有無權(quán)限訪問目標(biāo)頁面。符合條件就放行，不符合條件就擋回去。這就是vue的遮羞布，無論用戶是正常操作，還是非正常輸入url跳轉(zhuǎn)，路由守衛(wèi)都能攔截，進(jìn)行鑒權(quán)。

　　那么react呢?尤其是react-router-dom@5版本，它沒有像vue這樣的路由守衛(wèi)供我們使用，也沒有像路由元信息這樣的東西讓我們?nèi)ケ鎰e是否需要鑒權(quán)。但是這個(gè)問題又是很常見必須要解決，所以我們得自己想辦法了。

　　其實(shí)玩react的人都知道，react比vue更接近原生，沒有那么高度的封裝。這就意味著，在框架沒有給我們提供可用功能的情況下，我們就需要自己去實(shí)現(xiàn)。

　　沒有路由守衛(wèi)和元信息，我們就直接在頁面中的componentDidMount聲明周期函數(shù)中寫邏輯，或者函數(shù)式組件中，用useEffect加上空依賴模擬該生命周期函數(shù)。在函數(shù)中，我們可以獲取當(dāng)前登錄用戶，假設(shè)你將登錄用戶保存在redux中或者其它地方，現(xiàn)在可以去獲取它了。獲取后，進(jìn)行判斷，如果當(dāng)前用戶沒有登錄，或者當(dāng)前用戶沒有權(quán)限訪問該頁面，那么我們?nèi)匀豢梢杂镁幊淌綄?dǎo)航將頁面路由回退，并提示用戶無權(quán)限訪問。這就是react的遮羞布。

　　當(dāng)然，如果你有很多頁面都需要鑒權(quán)?；蛘哒f對于一個(gè)管理系統(tǒng)，應(yīng)該絕大部分頁面都需要這樣的路由鑒權(quán)。此時(shí)如果我們像上述這種方法區(qū)實(shí)現(xiàn)，那么就需要編寫大量的代碼到每個(gè)頁面，工作量大，代碼冗余，且不易維護(hù)。我們就可以想到，去模擬vue路由那樣，將鑒權(quán)的代碼封裝到一個(gè)js文件中，在這個(gè)js文件中寫出所有需要鑒權(quán)的頁面路由地址，我們稱之為鑒權(quán)列表，并導(dǎo)出模塊。在需要鑒權(quán)的頁面進(jìn)行引入，通過獲取當(dāng)前頁面路由地址，與鑒權(quán)列表中的路由地址進(jìn)行比對，匹配上后進(jìn)行鑒權(quán)?；蛘叻庋b成高階組件，直接套在原頁面外面等等。

　　只要思想不滑坡，辦法總比困難多。其實(shí)這個(gè)問題也是當(dāng)前react求職者在面試時(shí)被問的頻次較高的一個(gè)問題。乍一問可能腦子一片空白，但是坐下來細(xì)心想想，并沒有那么難，如果你有react的工作經(jīng)驗(yàn)，稍微花幾分鐘時(shí)間，方案就出來了?？傊畆eact就是一句話，自己動(dòng)手，豐衣足食。