基于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 相关文章推荐
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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 柱状图实现代码
2009/12/04 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php cookie 详解使用实例
2016/11/03 PHP
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
JSON Web Tokens的实现原理
2017/04/02 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
python实现猜单词游戏
2020/05/22 Python
Python调用Redis的示例代码
2020/11/24 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
后勤人员岗位职责
2013/12/17 职场文书
简单英文演讲稿
2014/01/01 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
《失物招领》教学反思
2016/02/20 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL