浅谈vue后台管理系统权限控制思考与实践


Posted in Javascript onDecember 19, 2018

前言

最近在开发管理系统时遇到了任何管理系统都会有的需求---权限控制,之前也遇到过这种需求,但是架构不完善导致的各种问题使得后期维护非常麻烦,这一次的方案解决了之前的种种问题,现做一次记录,当然这个架构后期可能会有坑,不过得一步一步的尝试才能发现并解决问题。

权限控制需求

因为是单页面应用,路由交给前端来控制,对于一些需要特定权限才能查看的信息的保护变得尤为重要,如果前端不做好权限校验,后端也一时疏忽,就可能就会导致数据泄露。

对于权限控制,需求大致为如下:

  1. 对于大模块的限制,比如需要通过路由跳转的模块,这时需要进行路由拦截
  2. 对于小功能的限制,比如一个按钮,如果没有特定权限,那么这个按钮就不显示

安全层面的思考

之前接手了一个管理系统,前端是将权限列表存储在storage中来实现长久储存,这种实现方式是很不可取的,因为hacker可以通过手动更改存储的信息来实现获取特定权限,甚至系统都没有做路由拦截,如果知道模块的路由,可以直接通过输入路由信息来直接跳转到特定模块。对于一些模块的权限,权限被管理员修改后也无法立即生效,所以对于这几种情况做了如下思考与实践。

权限被管理员修改后立即生效

对于这个需求,我的做法是,获取到权限列表后,将权限信息存储在 vuex store 中,并且使用getter函数,对于是否可以使用该权限进行判断,这样一旦权限数据更新,前端权限限制功能点会自动修改,从而做到权限的实时性,大致实现如下:

// vuex state.js
export default {
  userPrivileges: {
    admin: [],
    purchaser: []
  }, // 用户权限信息
}
// vuex getters.js
export default {
  canIUse: state => (role, id) => state.userPrivileges[role].includes(id)
}

// 页面具体小功能,通过 mapGetters 引入 canIUse 函数
<span v-if="canIUse('admin', 9)">{{scope.row.allocation_subtotal}}</span>

这样一来,数据存储在内存中,那么权限信息就无法轻易的被修改,同时对于权限的判断也非常简单,只需要在特定功能点传入功能点的权限id就能判断是否可以使用这个权限了。

但是将数据存储在了内存中也会遇到一个问题,页面刷新怎么办?接下来就是讲解这种情况。

刷新页面也可以进行权限判断

对于大模块的权限拦截,肯定是通过路由钩子来进行拦截的(这种实现有很多文章讲解过,这里不具体讲解),但是通过路由钩子进行拦截的前提是,权限信息得提前存在。

刷新页面会存在这种情况,页面刷新时,先执行的路由钩子,再执行的组件生命周期钩子来请求权限的列表,此时权限信息不存在,那么页面跳转到登陆页的话,体验就不够友好。

所以我的做法是,建立一个中间页,如果权限校验不通过,那么跳转至中间页,中间页进行权限的请求,请求到权限后,再判断是否可以跳转,这样的话,刷新页面体验就比较好。大致代码如下:

// vuex actions.js
// 通过返回一个promise,使得store更新与后续代码变为“同步”执行
export default {
  getUserPrivileges({ commit }) {
    return fetch.get({
      url: '/currentstaff'
    }).then(data => {
      commit('SET_USER_PRIVILEGES_INFO', data.data)
      return data.data
    }).catch(e => {

    })
  }
}
// router.js
// 需要验证权限的路由
{
  path: 'suppliers',
  component: Suppliers,
  meta: {
    role: 'admin',
    privilegeId: 5
  }
}

function isCanUseThisModule(to, from) {
  return to.matched.every(record => {
    // 利用路由meta存储相应权限信息
    if (record.meta.role) {
      return store.getters.canIUse(record.meta.role, record.meta.privilegeId)
    } else {
      return true // 如果不需要权限,直接返回true
    }
  })
}

router.beforeEach((to, from, next) => {
  if (isCanUseThisModule(to, from)) {
    next() // 权限验证通过,跳转下一路由
  } else {
    next({
      path: '/main/privilegeValidator' // 权限验证不通过时的中间页
    })
  }
})

// 权限校验中间页代码示例
created() {
  this.$store.dispatch('getUserPrivileges').then(data => {
    for (let i = 0; i < data.admin_permissions.length; i++) {
      if (this.canIUse('admin', data.admin_permissions[i])) {
        this.$router.push({
          path: this.routerList.find(value => value.privilegeId === data.admin_permissions[i]).linkHref
        })
        return
      }
    }
    this.$router.push('/login') // 如果没有任何权限,则跳转登陆页面
  })
}

用户在登陆后也可以跳转到这个权限中间页,进行权限判断后再跳转到对应模块。

尾声

大致的实现过程就是这样,希望对大家有所帮助,如果有暗坑还请指出。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 实现完美include载入实现代码
Aug 05 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
如何为vue的项目添加单元测试
Dec 19 #Javascript
浅谈Angular7 项目开发总结
Dec 19 #Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 #Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 #Javascript
vue使用Google地图的实现示例代码
Dec 19 #Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 #Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 #Javascript
You might like
学习使用curl采集curl使用方法
2012/01/11 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
DOM精简教程
2006/10/03 Javascript
学习js所必须要知道的一些
2007/03/07 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
python3 图片referer防盗链的实现方法
2018/03/12 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python3 log10()函数简单用法
2019/02/19 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers