Vue 指令实现按钮级别权限管理功能
在项目中经常有需求要根据用户的权限对界面上的元素进行控制,这里介绍了一直简单的实现,仅供参考。
当前用户的权限列表储存在 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.js 实现前后端分离的RBAC角色权限管理
项目背景:物业管理后台,不同角色拥有不同权限 采用技术:Vue.js + Vuex + Element UI 实现 RBAC 权限管理需要后端接口支持,这里仅提供前端解决方案. 因代码篇幅较大,对代码进行了删减,文中 "..." 即为省略的一部分代码. 大致思路: 首先登录成功后,从后台拉取用户当前可显示的菜单和可用权限列表,分别将其存入 store 的 nav(菜单导航) 和 auth(用户可用权限) 中,在用户切换路由时,判断是否存在 auth ,如果不存在,则重新获取,判断当前访
-
关于Vue的路由权限管理的示例代码
前言 曾经在工作上对 vue 路由权限管理这方面有过研究,这几天又看到了几篇相关的文章,再加上昨天电面中又再一次提及到,就索性整理了一下自己的一些看法,希望对大家有帮助. 实现 大体上实现的思路很简单,先上图: 无非是将路由配置按用户类型分割为 用户路由 和 基本路由,不同的用户类型可能存在不同的 用户路由,具体依赖实际业务. 用户路由: 当前用户所特有的路由 基本路由:所有用户均可以访问的路由 实现控制的方式分两种: 通过vue-router addRoutes方法注入路由实现控制 通过vue
-
基于vue实现网站前台的权限管理(前后端分离实践)
Javascript做为当下的热门语言,用途很广泛,从前端到后端处处可见其存在,该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面,为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习. Javascript框架鳞次栉比,但基本原理大致相同,因此选用国内人开发的vue.js进行一个初步的尝试.学习vue.js也一周多的时间了,说起vue的主要用法,无外乎Declarative Rendering.Component System.Client-si
-
基于Vue自定义指令实现按钮级权限控制思路详解
思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮
-
详解基于vue-router的动态权限控制实现方案
使用vue开发带权限管理系统,尤其是采用了vue-router做路由,很多人都遇到的一个问题就是如何动态加载路由path对应的component. 典型的应用场景就是:前端菜单不静态的写在vue程序里,而是要从后台程序和数据库返回的菜单来动态加载到vue应用中. 网上很多问权限的问题,但几乎找不到很好的解决答案,在很长一段时间里,非常打击使用vue技术栈开发的信心.最有质量的一篇文章是:http://www.jb51.net/article/124801.htm 但作者并没有完全解决这个问题,还
-
详解VUE前端按钮权限控制
在用户登陆后,根据用户id读取用户的所有权限数据,放入本地的storage进行存储,之后,定义指令,如果用户含有此按钮权限,则在页面显示出来: /**权限指令**/ Vue.directive('has', { bind: function(el, binding) { if (!Vue.prototype.$_has(binding.value)) { el.parentNode.removeChild(el); } } }); //权限检查方法 Vue.prototype.$_has = f
-
详解vue + vuex + directives实现权限按钮的思路
遇到了一个业务场景: 某个按钮按下去之前需要先判断它是否登陆,如果没有登陆需要跳转到对应的登陆页面,否则就继续该按钮之后的操作. 对于这种问题,很显然不能每个按钮都去判断,所以我思考了一下结合自定义指令和vuex完成了相应的实现. 主要的代码实现 const directive = Vue.directive('permission-click', { bind: (el, binding, vnode) => { el.addEventListener('click', (e) => { i
-
vue addRoutes实现动态权限路由菜单的示例
需求 最近接手一个后台管理系统,需要实现导航菜单从后台拉取的效果:根据登录用户的权限不同分别拉出来的导航菜单也不一样,另外可操作的界面也存在区别. 问题 因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的,可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了,所以在进入登录页面的时候旧没办法在重新定制路由了.接下来各种百之谷之,发现vue-router在2.0版本中提供了addRoutes方法添加路由,希望的曙光出现.
-
vue-router路由懒加载和权限控制详解
vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo 所以下面介绍下,路由懒加载 1.为什么要使用路由懒加载呢 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效 2.用法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) e
-
vue vuex vue-rouert后台项目——权限路由(适合初学)
项目地址: vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面(共三个页面) barbara 拥有 权限B 他可以看到 red 和 yellow 页面 carrie 拥有 权限C 他可以看到 red 和 blue 页面 技术栈 webpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 实现不同组件间的状态
随机推荐
- asp.net实现的计算网页下载速度的代码
- jquery 插件实现图片延迟加载效果代码
- iOS实现图片六边形阴影效果
- DropDownList设置客户端事件思路
- asp.net中TextBox只能输入数字的最简洁的两种方法
- 关于php正则匹配汉字的方法介绍
- python获取外网ip地址的方法总结
- node+vue实现用户注册和头像上传的实例代码
- 非常酷的角BANNER
- 清华校长送给毕业生的五句话,值得一看
- Spring Boot 之HelloWorld开发案例
- jQuery取得元素标签名称小结(附代码)
- javascript将数字转换整数金额大写的方法
- Android 中Failed to read key from keystore解决办法
- 用PHP生成PDF文件 with FPDF
- Android 处理空列表的方法(必看篇)
- JavaScript实现数值自动增加动画
- MySQL存储引擎MyISAM与InnoDB区别总结整理
- 使用java代码获取新浪微博应用的access token代码实例
- 一步一步跟我学易语言之变量的有效范围