目标
在类似运营平台的项目中，经常会有一些操作按钮需要校验当前登录的用户是否有权限访问。然而在每一个按钮上都加 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>
