vue2按钮权限控制（自定义指令）

首先，在main.js中注册全局指令，

import Vue from 'vue';

//  按钮权限控制指令
Vue.directive('permission', {
  inserted: (el, binding)=>{
    const { value } = binding;
    // 判断当前用户是否拥有该按钮权限
    if (!checkPermission(value)) {
      el.parentNode.removeChild(el);
    }
  }
});
// 判断权限的函数
function checkPermission(permission) {
  var permissions = JSON.parse(localStorage.getItem('limits'))
  return permissions[permission];
  }

在这里我提前将按钮权限的数据存储在了localStorage中，数据格式如下图

然后，在组件中使用v-permission指令控制按钮的显示和隐藏：

<template>
  <div>
    <button v-permission="'allowAdd'">添加</button>
    <button v-permission="'allowUpdate'">编辑</button>
    <button v-permission="'allowDelete'">删除</button>
  </div>
</template>

在上面的代码中，v-permission指令的参数是一个字符串，表示按钮的权限。指令会根据当前用户的权限判断按钮是否应该显示，如果权限不足，则从DOM中删除该按钮。