在pc 管理系統這種類型的產品，通常會涉及到賬號許可權的控制，不同的賬號許可權能瀏覽的功能模塊是不同的，對應側邊欄菜單模塊的顯示也會不同。 ...
在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 許可權，控制相關操作區域的渲染。
