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 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
纯js实现手风琴效果
Apr 17 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
JS实现多功能计算器
Oct 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之第二天
2006/10/09 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
PDO::_construct讲解
2019/01/27 PHP
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
python中enumerate函数用法实例分析
2015/05/20 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
python按比例随机切分数据的实现
2019/07/11 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
"引用"与多态的关系
2013/02/01 面试题
PyQt QMainWindow的使用示例
2021/03/24 Python
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
机械个人求职信范文
2014/01/24 职场文书
主题酒店策划书
2014/01/28 职场文书
科学发展观标语
2014/10/08 职场文书
美术教师个人工作总结
2015/02/06 职场文书
欢送会主持词
2015/07/01 职场文书
公司车辆维修管理制度
2015/08/05 职场文书