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 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
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
DSP接收机前端设想
2021/03/02 无线电
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
最新自我评价范文
2013/11/16 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
基层工作经历证明
2015/06/19 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
食堂卫生管理制度
2015/08/04 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android