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 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 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 实用代码收集
2010/01/22 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php常用的url处理函数总结
2014/11/19 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
高中政治教学反思
2014/01/18 职场文书
天坛导游词
2015/02/02 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
大队委员竞选稿
2015/11/20 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js