vue前端权限控制

本文主要是介绍vue前端权限控制，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

注意：

　1. allRoutes是本地定义的所有页面路由；

　2. 'index' 是主页路由；

　3. menuArr是权限菜单id数组 let menuArr = ['useWaterAdmin', 'dataCenter', 'historyData', 'waterMonitor', ];

　4. 后端返回权限格式：

　　4.1 返回菜单id数组：使用本文方法；

　　4.2 返回菜单树结构：菜单直接渲染，路由直接addRoute；（返回菜单树的话后端需要维护菜单树，不能解耦，不建议使用）；

　　4.3 返回一维数组的父子菜单树：可以使用本文方法，也可以转成4.2的树结构；

一、按钮权限

　　1. 使用全局自定义指令，在自定义指令的生命周期里添加置灰样式控制；

　　2. 在按钮上添加权限方法，配合v-if隐藏按钮，会导致样式错乱，不建议使用；

二、菜单权限：

　　1. 加载全部菜单，根据权限数组用v-if做显示控制；

　　2. 根据权限数组过滤出有权限的菜单，只加载有权限的菜单；

function filterMenu(allRoutes) {
  let resultArr = allRoutes.filter((item) => {
    if (menuArr.includes(item.name)) {
      if (item.children) {
        item.children = filterMenu(item.children);
      }
      return item;
    }
  });
  return resultArr;
}
// console.log(filterMenu(allRoutes));

三、路由权限

　　1. 在路由配置中注册全部路由，在路由全局前置守卫router.beforeEach的to中根据权限数组判断没权限的跳404；


　　2. 只注册有权限的路由：　　　　

　　　　2.1 先在路由配置中注册全部路由，再根据权限数组删除没权限的路由；

filterRoute('index',allRoutes);
function filterRoute(parent, allRoutes) {
  allRoutes.map((item, index) => {
    if (menuArr.includes(item.name)) {
      if (item.children) {
        filterRoute(item.name, item.children);
      }
    } else {
      router.removeRoute(item.name);
    }
  });
}
// console.log(router.getRoutes());

　　　　2.2 根据权限数组过滤出有权限的路由树，使用addRoute只注册有权限的路由。此处和过滤有权限的菜单一样。

function filterMenu(allRoutes) {
  let resultArr = allRoutes.filter((item) => {
    if (menuArr.includes(item.name)) {
      if (item.children) {
        item.children = filterMenu(item.children);
      }
      return item;
    }
  });
  return resultArr;
}
router.addRoute('index', filterMenu(allRoutes));
// console.log(router.getRoutes());

相关文章参考：

如何用 Vue 实现前端权限控制

这篇关于vue前端权限控制的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！