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 相关文章推荐
javascript列表框操作函数集合汇总
Nov 28 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
微信小程序实现图片上传功能
May 28 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
vue中的inject学习教程
Apr 24 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
javascript实现视频弹幕效果(两个版本)
Nov 28 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简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
iPython pylab模式启动方式
2020/04/24 Python
浅谈Python中的字符串
2020/06/10 Python
Python 内存管理机制全面分析
2021/01/16 Python
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
五五普法心得体会
2014/09/04 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android