Vue自定义指令校验按钮权限

目标

在类似运营平台的项目中，经常会有一些操作按钮需要校验当前登录的用户是否有权限访问。然而在每一个按钮上都加 v-if 判断非常的繁琐和冗余，为此可以通过自定义指令的方式来处理按钮权限

实现方案

在main.js全局添加自定义指令

// 权限列表，此处为mock，正式应根据登录人的身份从后端获取
const permissionList = ['productAdd', 'productDelete', 'productEdit'];

const app = createApp(App);
// 自定义权限校验指令
app.directive('permission', {
  mounted: function (el, binding) {
    // 获取绑定的权限值
    const permission = binding.value;
    // 进行权限判断，如果权限列表中不包含传入的权限值，进行拦截
    if (!permissionList.includes(permission)) {
      // 方法一：移除页面没有权限的按钮
      el.parentNode && el.parentNode.removeChild(el);

      // 方法二：显示操作按钮，点击弹出拦截提示
      const cloneEl = el.cloneNode(true); // 克隆一个新节点，替换原有的点击事件，将点击事件改为无权限提示
      cloneEl.addEventListener("click", function () {
        alert("没有该操作权限，请联系系统管理员！");
      });
      el.parentNode && el.parentNode.replaceChild(cloneEl, el); // 替换掉原来绑定事件的节点
    }
  }
});

如果是vue2，将mounted改为inserted即可

// Vue2
Vue.directive('permission', {
  inserted: function (el, binding) {
    // ...
  }
});

在业务组件中添加 v-permission

// 有权限，可以正常触发click方法
<button @click="addProduct" v-permission="'productAdd'">新增商品</button>

// 无权限，click方法被替换，点击报：“没有该操作权限，请联系系统管理员！”
<button @click="addUser" v-permission="'userAdd'">新增用户</button>