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

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

实现思路：

1. 注册一个全局的自定义指令插件

2. v-permission="xxxx" 传入的 xxxx 权限码值可以数字也可以是数组。数字代表这个元素仅有一个权限码值控制，数组的话比如 v-permission="[1, 2, 3]" 代表该元素有 1、2、3 这三个权限共同控制。（根据实际需求设计自定义指令逻辑）

3. 获取到 v-permission 传入的权限码值后，根据后端返回的用户权限中判断用户是否有该权限码值，若没有则获取到自定义指令绑定的元素，并且将元素从Dom树中移除，实现功能按钮权限控制。

4. 实现了自定义指令后，获取后端返回的用户的权限码值集合。在用户登录后的 router.beforeEach 路由前置守卫中获取，获取到之后保存在 vuex 中存储，在自定义指令中去获取 vuex 中保存的权限来对当前自定义指令。（具体获取的权限码值的代码在主页的其他权限控制篇）

实现具体过程

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

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);
  },
};

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

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

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

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

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

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

遇到的问题

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

总结

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

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