前端開發頁面怎麼實現權限設置?大家好，我是前端西瓜哥我給網站加上按需加載語言功能有一段時間後，測試給我找到了這麼一個的 bug，現在小編就來說說關于前端開發頁面怎麼實現權限設置?下面内容希望能幫助到你，我們來一起看看吧!

前端開發頁面怎麼實現權限設置

大家好，我是前端西瓜哥。

我給網站加上按需加載語言功能有一段時間後，測試給我找到了這麼一個的 bug。

可能還是因為支持的語言太少，國外用戶也太少的原因，所以這個問題這麼晚才被發現。

那我們來看看這個問題。

用戶設置網站語言為中文，但浏覽器設置語言為英文。

用戶打開網站，跳轉到登錄界面。因用戶未登錄，前端讀取到浏覽器為英語語言，所以動态加載英語語言。

輸入用戶名和密碼，跳轉到首頁。因為用的是單頁面應用（SPA），沒有刷新頁面，所以文案仍然是英文文案。

用戶需要刷新一下頁面，才能拿到他設置的中文語言的文案。

最簡單的方案，是丢棄 SPA 的不刷新頁面的 “假跳轉”，換成真跳轉。

也就是說，不要使用原來底層為 history.pushState() 的 React Router 或 Vue Router 庫的 API，直接使用 window.location.href = homeUrl。

登錄請求成功後，前端拿到了用戶 Token。接着跳到首頁并做一個重新加載語言的操作，因為有用戶憑證，我們就能正确加載用戶設置的語言。

雖然 SPA 打包後的文件通常很大，但我們有緩存，重新加載一遍的速度還是挺快的。

這裡有一個可選的優化點：如果用戶設置的語言和浏覽器語言相同，可以仍舊使用 “假跳轉”。這點需要後端配合，讓登錄接口額外返回當前用戶語言字段。

請求登錄接口，拿到用戶 Token 後，需要額外拿到用戶設置的語言。

根據這個語言标識，動态獲取對應的語言包 JS 文件，語言包下載完畢并覆蓋掉原來的語言包，然後再 “假跳轉” 到主頁。

同樣，如果用戶語言和浏覽器語言相同，直接“假跳轉”到主頁即可。

看起來好像不是很複雜的樣子，但其實裡面有很多坑。

要使用這種方案，你必須保證你的代碼對語言包對象是響應式的。也就是說語言包對象一改變，你的組件你的方法都得自動跟着變化。

這意味着在某些情況下你不能使用緩存，對一些涉及到國際化文案的邏輯，要寫成函數的形式。組件不能使用外部的靜态内容，需要依賴 Context 或 Redux 這些會觸發組件重渲染的方案。

當然如果你這樣做了，也有好處，就是你切換語言時，不需要重新加載頁面，組件會重新渲染應用新的語言文案。

我更傾向于使用方案 1，因為它簡單，适用于任何場景。此外從不登錄到登錄，裡面會發生非常多的狀态變化，不太好維護。

另外，退出登錄同樣也要做重新加載頁面的操作，因為用戶語言和浏覽器語言可能并不同。

我是前端西瓜哥，一名喜歡思考的前端開發，歡迎關注我。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!