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中删除该按钮。