一，写一个全局函数来判断，是否有权限，然后在页面使用v-if来显示
permission.js
export function hasPermission (permission) {
const permissions = JSON.parse(localeStorage.getItem('permissions'));
return permissions.includes(permission);
}返回true和false。
<div>
<h1>按钮权限</h1>
<button v-if="haspermission('system.user.add')" >新增用户</button>
<button v-if="haspermission('system.user.edit')" >修改用户</button>
<button v-if="haspermission('system.user.del')" >删除用户</button>
</div>
二、自定义指令v-haspermission="'system.user.add'" 这种自定义指令来判断是否显示。
<div>
<h1>按钮权限</h1>
<button v-haspermission="'system.user.add'" >新增用户</button>
<button v-haspermission="'system.user.edit'" >修改用户</button>
<button v-haspermission="'system.user.del'" >删除用户</button>
</div>自定义一个v-haspermission指令来完成。
src下的directives/专门存放自定义指令的目录
src/directives/haspermission.js
export default {
bind(el, bindings) {
const permissions = localStorage.getItem('permissions');
console.log('el', el);
console.log('bindings', bindings);
console.log('bindings.value', bindings.value);
const needPermission = bindings.value;
const hasPermission = permissions.inclueds(needPermission);
if (!hasPermission) {
el.style.display = 'none';
console.log(has directives);
setTimeout(() => {
console.log("setTimeout");
el.parentNode.removeChild(el);
},0)
//el.parentNode.removeChild(el);
}
}
}不能直接el.parentNode.removeChild(el)；是因为，他的操作需要在组建mounted之后，所以需要放到setTimeout内完成。
