最近在開發管理系統時遇到了任何管理系統都會有的需求---許可權控制，之前也遇到過這種需求，但是架構不完善導致的各種問題使得後期維護非常麻煩，這一次的方案解決了之前的種種問題，現做一次記錄，當然這個架構後期可能會有坑，不過得一步一步的嘗試才能發現並解決問題。
因為是單頁面應用，路由交給前端來控制，對於一些需要特定許可權才能檢視的資訊的保護變得尤為重要，如果前端不做好許可權校驗，後端也一時疏忽，就可能就會導致資料洩露。
對於許可權控制，需求大致為如下：
對於大模組的限制，比如需要通過路由跳轉的模組，這時需要進行路由攔截
對於小功能的限制，比如乙個按鈕，如果沒有特定許可權，那麼這個按鈕就不顯示
之前接手了乙個管理系統，前端是將許可權列表儲存在storage中來實現長久儲存，這種實現方式是很不可取的，因為hacker可以通過手動更改儲存的資訊來實現獲取特定許可權，甚至系統都沒有做路由攔截，如果知道模組的路由，可以直接通過輸入路由資訊來直接跳轉到特定模組。對於一些模組的許可權，許可權被管理員修改後也無法立即生效，所以對於這幾種情況做了如下思考與實踐。
對於這個需求，我的做法是，獲取到許可權列表後，將許可權資訊儲存在vuex store中，並且使用getter函式，對於是否可以使用該許可權進行判斷，這樣一旦許可權資料更新，前端許可權限制功能點會自動修改，從而做到許可權的實時性，大致實現如下：
// vuex state.js
export default , // 使用者許可權資訊
}// vuex getters.js
export default
// 頁面具體小功能，通過 mapgetters 引入 caniuse 函式
}複製**
但是將資料儲存在了記憶體中也會遇到乙個問題，頁面重新整理怎麼辦？接下來就是講解這種情況。
對於大模組的許可權攔截，肯定是通過路由鉤子來進行攔截的（這種實現有很多文章講解過，這裡不具體講解），但是通過路由鉤子進行攔截的前提是，許可權資訊得提前存在。
重新整理頁面會存在這種情況，頁面重新整理時，先執行的路由鉤子，再執行的元件生命週期鉤子來請求許可權的列表，此時許可權資訊不存在，那麼頁面跳轉到登陸頁的話，體驗就不夠友好。
所以我的做法是，建立乙個中間頁，如果許可權校驗不通過，那麼跳轉至中間頁，中間頁進行許可權的請求，請求到許可權後，再判斷是否可以跳轉，這樣的話，重新整理頁面體驗就比較好。大致**如下：
// vuex actions.js
// 通過返回乙個promise，使得store更新與後續**變為「同步」執行
export
default ) ).then(data => ).catch(e => )
}}// router.js
// 需要驗證許可權的路由
}function
iscanusethismodule(to, from) else
})}router.beforeeach((to, from, next) => else )
}})// 許可權校驗中間頁**示例
created() )
return}}
this.$router.push('/login') // 如果沒有任何許可權，則跳轉登陸頁面
})}複製**
大致的實現過程就是這樣，希望對大家有所幫助，如果有暗坑還請指出。
Vue後台管理系統的按鈕許可權控制
摘要 最近需要在原有的後台管理系統中，需要給頁面中的所有按鈕進行許可權控制 實現的思路如下 方法一 1 獲取後台傳過來的按鈕許可權陣列，並將其儲存下來 2 寫乙個全域性的方法。判斷某個按鈕的許可權是否含在後台傳的按鈕許可權陣列中 3 頁面中在按鈕上寫v if進行控制 如下 後台的按鈕許可權資料模擬 ...
vue 後台系統許可權管理
最近在做乙個後台管理系統，一般的後台系統都有許可權管理這塊，下面我就分享下我實現許可權管理這塊的思路。首先說下這個系統前端用到的技術棧，vue全家桶,element ui,axios。首先，使用者的許可權是通過前端來進行配置的，那麼就需要乙個頁面去進行使用者的許可權配置。在使用者登入之後，通過請求後...
後台管理系統的許可權控制 前端許可權管理
1.1 什麼是許可權管理 許可權管理是乙個幾乎所有後台系統的都會涉及的乙個重要組成部分，主要目的是對整個後台管理系統進行許可權的控制，而針對的物件是員工，避免因許可權控制缺失或操作不當引發的風險問題，如操作錯誤，資料洩露等問題。1.2 許可權分類 後端許可權管理 許可權管理的核心在於服務其中的資料變...