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 实现前端权限控制