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 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
Javascript MD4
2006/12/20 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python反射的用法实例分析
2018/02/11 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python增加图像对比度的方法
2019/07/12 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
开办加工厂创业计划书
2014/01/03 职场文书
培训主管岗位职责
2014/02/01 职场文书
先进班组事迹材料
2014/12/25 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
python开发人人对战的五子棋小游戏
2022/05/02 Python