全面解析vue权限管理 acl权限控制

github:https://github.com/HuaRongSAO/vue-admin

权限管理

什么是访问权限，我大致分为两部分：

• 服务器api访问权限（不归前端，先不管）
• 前端的页面访问、dom元素的展示、数据的请求
  我们重点讲一下前端开发的权限管理。

前端权限控制

我把它分成两部分：
1、页面级别的访问权限
2、元素级别的访问权限

1、页面级别的路由管理

页面级别的路由管理，我们通常采用，vue-route的beforeEnter来进行管理

store.js 使用vuex缓存user

const store = new Vuex.Store({
  state: {
    user: {
      ...
      promise:['isUser','isMaster','isAdmin'] //拥有什么权限
    }
  },
  getters：{
    user: state => state.user,
    promise: state => state.user.promise
  },
})

使用route管理页面跳转

// router.js
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'index',
      component: Hello,
      beforeEnter: checkAuth，
      childrens:[
        ...
      ]
    }
  ]
})

export function checkAuth (to, from, next) {
  const promise = router.app.$options.store.getters['promise']//获取用户权限
  const acl = ['isUser'] //权限控制 考虑到用户可能拥有多个权限
  const isPromise = unique(promise, acl)
  if (isPromise) {
    next()
  } else {
    console.log('你没有访问权限')
    router.push({name: 'login'}) //没有权限就跳转
  }
}
// 对比数组
function unique(arr1, arr2) {
  for (const item of arr1) {
    if (arr2.indexOf(item) > -1) return true
  }
  return false
}

2、元素级别的显示控制

通常我们都是直接使用v-if在控制,但是所有的页面都一次次的去获取 this.$store.getters['promise'] 会显得麻烦，而且页面不整洁。在这里我采用Vue.directive指令来优雅的处理权限

tempalte

v-promise 传入数组 表示有那些权限的用户可以展示<-->

核心代码 directive.js

import Vue from 'vue'
import store from './store'

const promiseDerective = Vue.directive('promise', (el, binding, vnode, oldVnode) => {
    const promise = store.getters['promise'] // 获取用户权限
    const acl = ['isUser', 'isAdmin']
    unique (acl, promise) ？el.style = 'display:true'： el.style = 'display:none'//这边有个小问题v-if的实现原理不知 只能用v-show的方法
  }
)
function unique(arr1, arr2) {
  for (const item of arr1) {
    if (arr2.indexOf(item) > -1) return true
  }
  return false
}

export default promiseDerective

main.js

import promiseDerective from './directive.js'
promiseDerective //添加指令到Vue
new Vue({
  ...
})

由于已经使用元素的显示控制，一般来说，就不存在数据权限调用的问题，因为元素都不显示了，就没有操作的机会，而且后台会对用户的请求的进行权限的过滤，但是还是得对请求失败进行处理
未完待续...