基于Vue自定义指令实现按钮级权限控制思路详解


Posted in Javascript onMay 23, 2018

思路:

  • 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)。
  • 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮权限的数组,在路由表里配置 ),然后判断role是否在btnPermissions数组里,若不在即删除该按钮DOM。

按钮权限也可以用v-if判断,但是如果页面过多,每个页面页面都要获取用户权限role和路由表里的meta.btnPermissions,然后再做判断,感觉有点麻烦,而自定义指令,只需在权限按钮加入该指令即可。

废话不多说,上代码...

路由配置:

path: '/permission',
  component: Layout,
  name: '权限测试',
  meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限
  children: [
   {
    path: 'supper',
    component: _import('system/supper'),
    name: '权限测试页',
    meta: { btnPermissions: ['admin','supper'] } //页面需要的权限
   },
   {
    path: 'normal',
    component: _import('system/normal'),
    name: '权限测试页',
    meta: { btnPermissions: ['admin'] } //页面需要的权限
   }
  ]

自定义指令:

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
 bind: function (el, binding, vnode) {
  // 获取按钮权限
  let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
  if (!Vue.prototype.$_has(btnPermissions)) {
   el.parentNode.removeChild(el);
  }
 }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
 let isExist = false;
 let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
 if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
  return false;
 }
 if (value.indexOf(btnPermissionsStr) > -1) {
  isExist = true;
 }
 return isExist;
};
export {has}

然后在main.js文件引入文件

import has from './public/js/btnPermissions.js';

页面中按钮只需加v-has即可

<el-button @click='editClick' type="primary" v-has>编辑</el-button>

结语:

权限这种事需要前后端结合,前端尽可能的去控制,记住:永远不相信用户输入!

以上所述是小编给大家介绍的基于Vue自定义指令实现按钮级权限控制,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
JScript实现地址选择功能
Aug 15 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 #Javascript
JavaScript+H5实现微信摇一摇功能
May 23 #Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 #Javascript
vue动态路由配置及路由传参的方式
May 23 #Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 #Javascript
深入剖析Node.js cluster模块
May 23 #Javascript
Node.js进阶之核心模块https入门
May 23 #Javascript
You might like
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
详解使用React制作一个模态框
2019/03/14 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Python 3.8 新功能全解
2019/07/25 Python
Python如何实现邮件功能
2020/05/27 Python
python实现人工蜂群算法
2020/09/18 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
测试驱动开发的主要步骤是什么
2014/12/10 面试题
预备党员思想汇报1000字
2014/10/07 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers