基于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中Math对象使用说明
Jan 16 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
vue+iview分页组件的封装
Nov 17 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创建多级目录代码
2008/06/05 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Python中的元组介绍
2019/01/28 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
学校岗位设置方案
2014/01/16 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
超市中秋节活动方案
2014/02/12 职场文书
上课看小说检讨书
2014/02/22 职场文书
解除劳动合同协议书
2014/09/17 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
优秀党员事迹材料
2014/12/18 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书