基于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 相关文章推荐
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
May 25 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
vue实现表格合并功能
Dec 01 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+MySQL 制作简单的留言本
2009/11/02 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
js表格分页实现代码
2009/09/18 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
PHP面试题大全
2015/10/16 面试题
数据库笔试题
2013/05/09 面试题
小学语文教学反思
2014/02/10 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
市场部岗位职责
2015/02/12 职场文书
2015年行政部工作总结
2015/04/28 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android