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

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

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

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

　　react中有:

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

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

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

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

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

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

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

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

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

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

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