React的遮羞布

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

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

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

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

　　react中有:

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

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

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

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

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

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

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

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

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

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

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