浅谈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 prototype截取字符串函数
Apr 01 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
js精确的加减乘除实例
Nov 14 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
微信小程序背景音乐开发详解
Dec 12 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
使用Sphinx对索引进行搜索
2013/06/25 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
python脚本实现查找webshell的方法
2014/07/31 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
金属材料工程个人求职的自我评价
2013/12/04 职场文书
小学安全教育材料
2014/02/17 职场文书
工会换届选举方案
2014/05/21 职场文书
酒店节能减排方案
2014/05/26 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android