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 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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中设置多级目录session的问题
2011/08/08 PHP
php简单分页类实现方法
2015/02/26 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
python使用opencv进行人脸识别
2017/04/07 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python随机数分布random均匀分布实例
2019/11/27 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python selenium操作cookie的实现
2020/03/18 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
应聘教师推荐信
2013/10/31 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
2015双创工作总结
2015/07/24 职场文书
病房管理制度范本
2015/08/06 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书