前言
最近在开发管理系统时遇到了任何管理系统都会有的需求 --- 权限控制, 之前也遇到过这种需求, 但是架构不完善导致的各种问题使得后期维护非常麻烦, 这一次的方案解决了之前的种种问题, 现做一次记录, 当然这个架构后期可能会有坑, 不过得一步一步的尝试才能发现并解决问题.
权限控制需求
因为是单页面应用, 路由交给前端来控制, 对于一些需要特定权限才能查看的信息的保护变得尤为重要, 如果前端不做好权限校验, 后端也一时疏忽, 就可能就会导致数据泄露.
对于权限控制, 需求大致为如下:
对于大模块的限制, 比如需要通过路由跳转的模块, 这时需要进行路由拦截
对于小功能的限制, 比如一个按钮, 如果没有特定权限, 那么这个按钮就不显示
安全层面的思考
之前接手了一个管理系统, 前端是将权限列表存储在 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') // 如果没有任何权限, 则跳转登陆页面
- })
- }
用户在登陆后也可以跳转到这个权限中间页, 进行权限判断后再跳转到对应模块.
尾声
大致的实现过程就是这样, 希望对大家有所帮助, 如果有暗坑还请指出.
来源: https://juejin.im/post/5c1781cb6fb9a049d37f0351