pc vue 專案中的選單許可權控制
在pc 管理系統這種型別的產品，通常會涉及到賬號許可權的控制，不同的賬號許可權能瀏覽的功能模組是不同的，對應側邊欄選單模組的顯示也會不同。
場景一、（電商類管理系統）
- 登入
- 登入後，依次獲取賬號 tokenId、店鋪列表、預設店鋪ID、選單列表
- 通過選單列表生成側邊欄，注意router 檔案裡面定義了全部的頁面路由，所以配置新選單時候需要提供給後端前端定義的頁面路徑
- menuList 資料存起來，可以存在 vuex、sessionStorage，這個資料可以用於router 裡面非白名單頁面的攔截比對，如果訪問當前賬號無許可權的頁面，可將其跳轉 404 頁面
- 在路由衛士裡面攔截檢查
場景二、（電商類單點登入系統）
單點登入類系統，通常會多個專案公用一套登入系統，專案首頁直接就是dashboard 或者 index頁面，選單許可權資料會放在專案初始化時候通過登入系統返回的 tokenID（可以存放到cookie） 來請求介面獲取，然後存到 sessionStorage ，到這裡可能會有個問題，每次重新整理頁面時候都會重複請求這個介面，是沒必要的，可以定義一個登入狀態識別符號，第一次登入成功後就做一個標識，之後專案頁面重新整理時候不再進行選單許可權介面請求，退出或者tokenID 過期失效時候，進行重置。
同樣在路由衛士這樣的地方進行跳轉路徑檢查，白名單放行，無許可權地址導到 404。
場景三、（關於 vuex 的資料重新整理丟失）
vuex 實際上是以全域性變數的形式儲存資料，每次重新整理頁面，就丟失了，可以通過幾種方式來實現重新整理資料保留
一、使用外掛 vuex-persistedstate ，可以實現持久化state, 其支援設定 localStorage、sessionStorage、cookie 三種形式的儲存，預設 localStorage，如果不想把所有state 都持久化，該外掛也是支援配置指定的state 持久化。
二、 監聽頁面重新整理（beforeunload），將 vuex 的 state 轉存到 sessionStorage，根 vue例項 created 時候將 sessionStorage 裡的資料在轉存到 vuex 裡（vuex.store的replaceState方法）。
export default {
name: 'App',
created () {
//在頁面載入時讀取sessionStorage裡的狀態資訊
if (sessionStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
//在頁面重新整理時將vuex裡的資訊儲存到sessionStorage裡
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
}
[參考](https://juejin.im/post/5c809599f265da2dbe030ec6)場景四、（頁面內許可權）
通常頁面內的增、刪、改、查，操作也是需要有對應的許可權控制的，所有頁面模組的許可權資料統一以物件形式在一個數組列表裡面，存到 vuex，然後在每個頁面的 created 時候，獲取並綁定當前頁面的 CURD 許可權，控制相關操作區域的渲染