浅谈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 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
JS中Array数组学习总结
Jan 18 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
pandas.cut具体使用总结
2019/06/24 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
中医专业职业生涯规划书范文
2014/01/04 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
实习介绍信范文
2015/05/05 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
MyBatis 动态SQL全面详解
2021/10/05 MySQL
Python简易开发之制作计算器
2022/04/28 Python