基于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:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 Javascript
JavaScript实现栈结构详细过程
Dec 06 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中的array数组类型分析说明
2010/07/27 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
Python实现PS图像调整黑白效果示例
2018/01/25 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
对python周期性定时器的示例详解
2019/02/19 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
境外导游求职信
2014/02/27 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
平安校园建设方案
2014/05/02 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
文案策划专业自荐信
2014/07/07 职场文书
自我检讨书怎么写
2015/05/07 职场文书
七夕情人节问候语
2015/11/11 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
编写python程序的90条建议
2021/04/14 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android