基于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 相关文章推荐
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
three.js实现圆柱体
Dec 30 Javascript
JS数组的常用10种方法详解
May 08 Javascript
详解Vue的sync修饰符
May 15 Vue.js
详解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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
javaScript语法总结
2016/11/25 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python使用Tesseract库识别验证
2018/03/21 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
介绍下static、final、abstract区别
2015/01/30 面试题
影视制作岗位职责
2013/12/04 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
授权委托书样本
2014/04/03 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android