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


Posted in Javascript onApril 23, 2019

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

当前用户的权限列表储存在 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 指令实现按钮级别权限管理功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 #Javascript
Vue infinite update loop的问题解决
Apr 23 #Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 #Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 #Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 #Javascript
vue项目首屏加载时间优化实战
Apr 23 #Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 #Javascript
You might like
深入php多态的实现详解
2013/06/09 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
解决ie img标签内存泄漏的问题
2017/10/13 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
生产部主管岗位职责
2014/01/06 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
班主任自我评价范文
2015/03/11 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
机关单位2016年法制宣传日活动总结
2016/04/01 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android