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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
javascript iframe内的函数调用实现方法
Jul 19 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
如何制作自己的原生JavaScript路由
May 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设计模式之装饰者模式
2012/02/29 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
分享10段PHP常用代码
2015/11/11 PHP
自动更新作用
2006/10/08 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
python线程池threadpool实现篇
2018/04/27 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
水果超市创业计划书
2014/01/27 职场文书
商场端午节活动方案
2014/01/29 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
幼师求职信
2014/06/23 职场文书
班子四风对照检查材料
2014/08/21 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
旷工检讨书大全
2015/08/15 职场文书
个人工作总结怎么写?
2019/04/09 职场文书