Vue项目实现简单的权限控制管理功能


Posted in Javascript onJuly 17, 2019

在Vue项目中实现权限控制管理

对于一般稍大一些的后台管理系统,往往有很多个人员需要使用,而不同的人员也对应了不同的权限系统,后端的权限校验保障了系统的安全性,而前端的权限校验则提供了优秀的交互体验。

校验方式

前端对用户的权限信息进行校验往往在两个方面进行限制

  • 路由不可见
  • 元素不可见

通过以上两个方式,来将用户权限之外的内容隐藏掉。

路由不可见实现方法

在router.js中的meta字段中加入该路由的访问权限列表

{
  path: 'edit',
  name: 'edit',
  meta: {
    title: '编辑账户',
    auths:['edit_account']
  },
  component: () => import('pathToComponent/component.vue'),
},

Vue.router中提供了导航守卫,我们这里使用 全局前置守卫 对路由跳转进行权限校验

router.beforeEach(to,from,next)

参数 to 是即将进入的路由对象,我们可以在对象中拿到之前在router.js中定义的 route 对象,并获得 auths 字段

router.beforeEach((to,from,next)=>{
  const hasAuth = function(needAuths,haveAuths){   //判断用户是否拥有权限的function
    // implement 
  }
  const havaAuths = []; // 用户拥有的权限列表
  if(!hasAuth(to.meta.auths,haveAuths)){
    //没有权限重定位到其他页面,往往是401页面
    next({replace:true,name:'otherRouteName'})
  }
  //权限校验通过,跳转至对应路由
  next();
})

在有侧边栏的后台管理中,还需要对侧边栏的路由导航进行隐藏,这里同样是通过拿到 route.meta.auths 字段进行过滤。

元素不可见实现方法

因为某些页面中会有一些特殊的接口调用或数据展示受到权限控制显示。前端通过控制元素的展示来隐藏掉用户不具有权限的元素,避免点击了某一个button导致接口401报错这样不友好的交互体验。

全局注册一个directive, directive官网介绍 。

//acl.js
const aclDirective = {
  inserted:function(el,binding){ // 在被绑定的元素插入到dom中时
    const hasAuth = function(needAuths,haveAuths){ //判断用户是否拥有权限的function
      // implement 
    }
    const havaAuths = []; // 用户拥有的权限列表
    if(!hasAuth(binding.value,haveAuths)){ //binding.value 可以获得绑定指令时传入的参数
      el.style = "display:none"; //修改元素的可见状态
    }
  }
}
//main.js
Vue.directive('acl',aclDirective); //全局注册指令

在需要控制显示的组件上我们就可以通过 v-acl 进行权限控制

<button v-acl="['edit_access']">编辑账户</button>

总结

以上所述是小编给大家介绍的Vue项目实现简单的权限控制管理功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
百度小程序自定义通用toast组件
Jul 17 #Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 #Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 #Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 #Javascript
微信小程序-API接口安全详解
Jul 16 #Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JavaScript解析JSON数据示例
Jul 16 #Javascript
You might like
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
javascript手工制作悬浮菜单
2015/02/12 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
js读取本地文件的实例
2017/12/22 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
js实现缓动动画
2020/11/25 Javascript
python中Genarator函数用法分析
2015/04/08 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
体育活动总结范文
2014/05/04 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
淘宝好评语句大全
2014/12/31 职场文书
幸福终点站观后感
2015/06/04 职场文书
国庆阅兵观后感
2015/06/15 职场文书
文明礼仪主题班会
2015/08/13 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
灵能百分百第三季什么时候来?
2022/03/15 日漫