Vue 指令实现按钮级别权限管理功能
2019-04-24 07:01
721 查看
在项目中经常有需求要根据用户的权限对界面上的元素进行控制,这里介绍了一直简单的实现,仅供参考。
当前用户的权限列表储存在 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 指令实现按钮级别权限管理功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣的文章:
相关文章推荐
- Vue自定义组件实现按钮权限功能
- Vue + Element UI 实现权限管理系统 前端篇(十四):菜单功能实现
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
- 通用权限管理系统组件 (GPM - General Permissions Manager) 中后一个登录的把前一个登录的踢掉功能的实现
- SpringMVC+Annotation实现方法、按钮级别的细粒度权限控制
- 管理系统类项目的登陆与权限功能的实现
- 通用权限管理系统组件 (GPM - General Permissions Manager) 中实现文件发送接收功能,附源码
- Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库
- 权限配置时的批量复制粘贴功能的实现,真正好用的权限配置管理开发工具
- 针对Vue的后台权限功能实现思路(持续更新) 3ff8
- 模块管理常规功能自己定义系统的设计与实现(31--第三阶段 权限设计[1])
- vue权限管理系统的实现代码
- 菜鸟学习c++—实现系统权限管理功能(类的public和private应用)
- 通用权限管理系统组件 (GPM - General Permissions Manager) 中实现文件发送接收功能,附源码
- 模块管理常规功能自定义系统的设计与实现(32--权限设计[2])
- 模块管理常规功能自定义系统的设计与实现(33--权限设计[3])
- 前后端分离实践:基于vue实现网站前台的权限管理
- 好几年一直想实现的功能,今天终于做出来了,权限配置时的批量复制粘贴功能的实现,真正好用的权限配置管理开发工具
- 通过SpringMVC+Annotation实现方法、按钮级别的细粒度权限控制
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证)