路由權限控制
前端路由是全部都由后端返回，還是后端返回對應角色下的權限，然后前端通過遍歷的方式來修改當前路由呢？
引用上面這個問題的采納答案：
第一種后台返回路由，第二種后台返回權限。
共同點：兩種方法都可以實現需求
前端都要維護一份路由地址與模塊文件地址的映射
后段返回的數據一般都要再遍歷做二次處理
有關頁面內元素（按鈕）的權限都要另做處理
技術點都會涉及路由守衛和路由鑒權差異點：
默認路由列表：方法一只維護home、login等無權限需求路由，其他路由需要后續通過接口和路由api：addRoutes動態添加；方法二需要維護一個全量的路由列表，不需要額外添加路由，通過配置每個路由的access數組來做鑒權。
路由跳轉：因為方法一返回的就是該用戶權限下的路由，所以不需要再做權限鑒權；方法二需要。
路由的自定義程度：方法一可以通過修改數據庫的路由數據來自定義前端的菜單結構，因此也需要做一個實現路由重組的遞歸函數，拓展性更好；方法二針對的是菜單結構相對穩定的項目，一般不支持結構變動。
返回報文：一般來說，返回報文大小 方法一比方法二要大
總結補充：
第一種是指動態路由，路由是分兩部分，一部分是home、login等無權限需求路由，一部分是由后端返回的該用戶權限下的路由，當用戶登錄后得到 roles，前端根據roles 去向后端請求可訪問的路由表，從而動態生成可訪問頁面，之后就是 router.addRoutes 動態掛載到 router 上；前端需要有菜單管理,可以通過修改路由數據來自定義前端的菜單結構，拓展性更好。
第二種是前端配置路由表，后端僅返回權限，前端需要有菜單的權限管理，並且加載路由和菜單時要做權限驗證；該方法是針對菜單結構相對穩定的項目，一般不支持結構變動。
按鈕權限控制
視圖控制
依據權限實現的按鈕顯隱控制和界面變化:
方法一：v-if
方法二：自定義指令
根據用戶權限判斷各個按鈕的顯示與否，方式無非是v-if或自定義指令，而且只要將v-if背后的權限校驗邏輯抽象成方法，無論是代碼量還是使用形式上都跟自定義指令幾乎一樣v-if的特點是它會響應數據變化，因此隨着應用的運行會頻繁觸發權限校驗，而權限在應用的整個生命周期內其實只需校驗一次。
自定義指令內部仍然是調用全局驗證方法，但優點在於只會在元素初始化時執行一次，多數情況下都應該使用自定義指令實現視圖控制。
所以，最好是使用自定義指令。
不一定每個操作按鈕都會發起AJAX請求，比如編輯按鈕本身並不會觸發請求，真正觸發請求的是另一個保存按鈕。
划重點：
讓按鈕和請求聯系起來，比如說按鈕涉及一個名稱為A的請求，那么權限指令可以這樣寫:
<btn v-has="A" @click="Fn">按鈕</btn>這里對A的實現可以有多種形式，比如A可以是一個包含兩個屬性的對象：
const A = {
p: ['put,/menu/**'], r: params => { return axios.put(`/menu/${params.id}`, params) } };//用作權限： <btn v-has="[A]" @click="Fn">按鈕</btn> //用作請求： function Fn(){ A.r().then((res) => {}) }
請求控制
利用axios攔截器實現的，目的是將越權請求在前端攔截掉。在請求攔截器中判斷本次請求是否符合用戶權限，以決定是否攔截。在請求發起前集中攔截，這時可以直接根據請求方法和請求地址來校驗權限。
以axios為例，攔截器大概長這樣：
vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com
axios.interceptors.request.use(function (config) { if(!has(config)){ //驗證不通過 return Promise.reject({ message: `no permission` }); } return config; });