功能按钮权限控制（使用自定义指令控制权限）

去年做过一次功能按钮权限控制 以及动态路由菜单权限控制，当时对于功能按钮的权限控制使用v-if对元素进行权限控制。

今年新开发的系统又迎来了权限控制的需求，这次的功能按钮权限控制就采用自定义指令的方式对元素进行权限控制。

本文只记录一下自定义指令对功能按钮的权限控制，动态路由菜单权限控制已经记录过啦，在主页~

使用 v-permission 当作自定义指令来对有权限的元素做权限控制

实现思路：

注册一个全局的自定义指令插件
v-permission="xxxx" 传入的 xxxx 权限码值可以数字也可以是数组。数字代表这个元素仅有一个权限码值控制，数组的话比如 v-permission="[1, 2, 3]" 代表该元素有 1、2、3 这三个权限共同控制。（根据实际需求设计自定义指令逻辑）
获取到 v-permission 传入的权限码值后，根据后端返回的用户权限中判断用户是否有该权限码值，若没有则获取到自定义指令绑定的元素，并且将元素从Dom树中移除，实现功能按钮权限控制。
实现了自定义指令后，获取后端返回的用户的权限码值集合。在用户登录后的 router.beforeEach 路由前置守卫中获取，获取到之后保存在 vuex 中存储，在自定义指令中去获取 vuex 中保存的权限来对当前自定义指令。（具体获取的权限码值的代码在主页的其他权限控制篇）

实现具体过程

首先注册插件（vue官网编写插件教程）：
其次注册自定义指令（vue官网自定义指令教程）

javascript 复制代码

import store from "@/store";

/**
 * 权限检查方法
 * 1. 如果 v-permission 传的是数字，只需要保证数字的权限码存在；
 * 2. 如果 v-permission 传的是数组，需要保证数组里每个字符串的权限码都存在
 * @param {Number|Array} requiredPerms 需要的权限
 * @returns {Boolean}
 */

/**
 * 权限指令对象
 */
const PermissionDirective = {
  // 自定义指令中的在 mounted 函数中获取绑定自定义指令的元素
  // el：当前元素
  // binding.value：传递给指令的值
  mounted(el, binding) {
    const { value } = binding;
    if (!value) {
      console.error("v-permission: 必须指定权限值");
      return;
    }
    const hasPermission = checkPermission(value);
    handleElementVisibility(el, hasPermission);
  },
};

function checkPermission(requiredPerms) {
  if (!requiredPerms) return false;
  // 获取用户的全部权限码值
  const userPerms = store.state.permissionMenu.permissionCodeList;
  const required = Array.isArray(requiredPerms)
    ? requiredPerms
    : [requiredPerms];
  // 判断绑定元素的权限码值是否都存在，都存在则返回true, 否则返回false
  return required.every((perm) => userPerms.includes(perm));
}

/**
 * 根据权限处理元素显示/隐藏
 */
function handleElementVisibility(el, hasPermission) {
  if (!hasPermission) {
    el.parentNode?.removeChild(el);
  }
}

export default {
  install(Vue) {
    // 注册指令
    Vue.directive("permission", PermissionDirective);
  },
};

全局注册自定义指令插件：需要导入到 main.js 中注册

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 注册自定义指令
import PermissionPlugin from "@/permission/directive"

Vue.use(store)
.use(router)
.use(PermissionPlugin) // 注册自定义指令插件
.mount('#app')

此时就可以在任意 vue 组件中使用自定义指令

模板中使用 v-permission 绑定功能权限按钮控制权限：

如果用户没有16这个权限码值，则对应无法查看"加入数据订单"的功能按钮

遇到的问题

当我对权限功能按钮元素使用自定义指令设置权限控制时，发现了有设置不成功的问题，也就是设置了权限本该隐藏的元素，但是却依旧显示。问题在于我使用的组件库是 ant-design-vue ，在绑定组件库的元素时有些组件库元素不会隐藏，比如在 a-menu-item 上设置自定义指令，在自定义指令的逻辑里是找到该el的父元素删除该el这个子元素。有些组件库组件元素可能有很强的嵌套等，所以失效了。对于有些不成功的元素我依旧使用 v-if 去进行的控制。所以说测试很重要！！！

总结

之前做功能权限按钮控制使用 v-if 进行控制，功能上没有问题，就是传入的参数需要判断代码比较冗余。
使用自定义指令，对每一个权限按钮设置权限时比较方便，绑定自定义指令传入权限值就好，但是对于有些组件库元素是无法删除掉的还是要使用 v-if，要需要注意避免遗留。

总的来讲，自定义指令控制权限还是很方便的，维护起来也能很方便的看见哪个元素绑定了 v-permission 自定义指令代表权限按钮。有新想法新技术还是要多多探索实现，点赞点赞！