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 相关文章推荐
JS解析XML的实现代码
Nov 12 Javascript
js控制div及网页相关属性的代码
Dec 19 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 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 第二节 数据类型之数组
2012/04/28 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
JS 验证码功能的三种实现方式
2018/11/26 Javascript
vue实现搜索功能
2019/05/28 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python实现在线翻译功能
2020/03/03 Python
python如何修改文件时间属性
2021/02/05 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
2014年业务工作总结
2014/11/17 职场文书
张思德观后感
2015/06/09 职场文书
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL
Pygame Rect区域位置的使用(图文)
2021/11/17 Python