基于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 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
Nginx实现反向代理
2017/09/20 Servers
javascript hasFocus使用实例
2010/06/29 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Python找出最小的K个数实例代码
2018/01/04 Python
python监控文件并且发送告警邮件
2018/06/21 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
与UNIX有关的几个名词
2015/09/17 面试题
初中生三年学习生活的自我评价
2013/11/03 职场文书
教育局长自荐信范文
2013/12/22 职场文书
植树节口号
2014/06/21 职场文书
黑白记忆观后感
2015/06/18 职场文书
教师节简报
2015/07/20 职场文书
工作感言一句话
2015/08/01 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
vue递归实现树形组件
2022/07/15 Vue.js