微客导航 » 文章资讯 » Vue 指令实现按钮级别权限管理功能

Vue 指令实现按钮级别权限管理功能

2023-08-24 07:26:04 317

在项目中经常有需求要根据用户的权限对界面上的元素进行控制，这里介绍了一直简单的实现，仅供参考。

当前用户的权限列表储存在store里，也可以是其他地方。

指令

//src/directives/permission.js
importVuefrom'vue';
importstorefrom'@/store';
import{get}from'@/utils';
//是否有权限
consthasPermission=userPermission=>{
letuserPermissionList=Array.isArray(userPermission)?userPermission:[userPermission];
//当前用户的权限列表
letpermissionList=get(store,'getters["user/permission"]',[]);
returnuserPermissionList.some(e=>permissionList.includes(e));
};
//指令
Vue.directive('per',{
bind:(el,binding,vnode)=>{
if(!hasPermission(binding.value)){
el.parentNode.removeChild(el);
}
}
});
//全局判断方法
Vue.prototype.$_has=hasPermission;

使用方法

在mian.js引入


admin可见
是否为admin：{{$_has('admin')}}//true

总结

以上所述是小编给大家介绍的Vue指令实现按钮级别权限管理功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue 指令实现按钮级别权限管理功能

热门推荐

随机推荐