Vue 指令实现按钮级别权限管理功能
程序员文章站
2023-12-15 10:19:04
在项目中经常有需求要根据用户的权限对界面上的元素进行控制,这里介绍了一直简单的实现,仅供参考。
当前用户的权限列表储存在 store 里,也可以是其他地方。
指令...
在项目中经常有需求要根据用户的权限对界面上的元素进行控制,这里介绍了一直简单的实现,仅供参考。
当前用户的权限列表储存在 store 里,也可以是其他地方。
指令
// src/directives/permission.js import vue from 'vue'; import store from '@/store'; import {get} from '@/utils'; // 是否有权限 const haspermission = userpermission => { let userpermissionlist = array.isarray(userpermission) ? userpermission : [userpermission]; // 当前用户的权限列表 let permissionlist = get(store, 'getters["user/permission"]', []); return userpermissionlist.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 引入
<div v-per="[admin]"> admin 可见 是否为admin:{{$_has('admin')}} //true <div>
总结
以上所述是小编给大家介绍的vue 指令实现按钮级别权限管理功能,希望对大家有所帮助