vue自定义指令控制权限

1、在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中了，正常是要调接口，格式如下：
limits:{allowAdd: true,allowUpdate: true,allowDelete: true
}

2、在组件中使用v-permission指令控制按钮的显示和隐藏

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

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