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函数
May 27 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
微信小程序实现点赞业务
Feb 10 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获取本机真实IP地址实例代码
2016/03/31 PHP
PHP实现递归的三种方法
2020/07/04 PHP
js验证是否为数字的总结
2013/04/14 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
Python中print和return的作用及区别解析
2019/05/05 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
销售高级职员求职信
2013/10/29 职场文书
打架检讨书400字
2014/01/17 职场文书
小学生新学期寄语
2014/01/19 职场文书
生物学专业求职信
2014/07/23 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
群众路线个人整改方案
2014/10/25 职场文书
运动会广播稿200字
2015/08/19 职场文书
升职自荐书
2019/05/09 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫