vue前端權限控制

注意：

　1. allRoutes是本地定義的所有頁面路由；

　2. 'index' 是主頁路由；

　3. hasMenuArr是權限菜單id數組 let hasMenuArr = ['useWaterAdmin', 'dataCenter', 'historyData', 'waterMonitor', ];

　4. 後端返回權限格式：

　　4.1 返回菜單id數組：先過濾出有權限的菜單路由，再渲染菜單註冊路由；（前端需要維護保存菜單樹，後端不需要維護菜單樹，建議使用）；

　　4.2 返回菜單樹結構：直接渲染菜單註冊路由；（前端不需要維護保存菜單樹，後端需要維護菜單樹，不夠解耦，不建議使用）；

一、按鈕權限

　　1. 使用全局自定義指令，在自定義指令的生命週期裏添加置灰樣式控制；

　　2. 在按鈕上添加權限方法，配合v-if隱藏按鈕，會導致樣式錯亂，不建議使用；

二、菜單、路由權限

　　1. 只加載有權限的菜單、路由

　　　　注意： 1. 建議使用此方法統一處理菜單、路由，後端返回菜單id數組的話需要先過濾出有權限的菜單路由，後端返回菜單樹的話不需要過濾，菜單直接渲染，路由遍歷時addRoute；

function filterMenu(allRoutes) {
  let resultArr = allRoutes.filter((item) => {
    if (hasMenuArr.includes(item.name)) {
      if (item.children) {
        item.children = filterMenu(item.children);
      }
      return item;
    }
  });
  return resultArr;
}
//渲染菜單
export const menuArr = filterMenu(allRoutes); 
// console.log(menuArr); 
//添加路由
menuArr.map((item)=> { 
　router.addRoute('index', item); 
}) 
// console.log(router.getRoutes());

　　2. 加載全部菜單、路由

　　　　1. 加載全部菜單，根據權限數組用v-if做顯示控制；

　　　　2. 註冊全部路由（路由配置項中註冊），在路由全局前置守衛router.beforeEach的to中根據權限數組判斷沒權限的跳404；

 

 

　　　　

相關文章參考：

如何用 Vue 實現前端權限控制