Vue自定义指令之按钮级别权限的管理

封装权限指令控制按钮

第一步：
登录的时候让后端返回当前账号的角色，即 role，存入Vue中；

第二步：
封装vue自定义指令，来判断用户权限，具体思路是 从Vuex取出登录后后端角色信息和指令中用户传入的角色信息进步比对，如果存在即有权限，如果不存在则无权限。

src/directive/permission/permission.js

import store from '@/store'
 
function checkPermission(el, binding) {
  const { value } = binding
  const roles = store.getters && store.getters.roles
  // 判断角色信息是否存在并且是数组
  if (value && value instanceof Array) {
    // 当角色存在时
    if (value.length > 0) {
      const permissionRoles = value
      /**
       * 判断vuex中获取的角色信息是否符合
       * some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
       * some() 方法会依次执行数组的每个元素：
       * 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
       * 如果没有满足条件的元素，则返回false。
       * 注意： some() 不会对空数组进行检测。
       * 注意： some() 不会改变原始数组。
       */
      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })
      /**
       * 如果不符合则取出这个dom
       */
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  } else {
    throw new Error(`need roles! Like v-permission="['admin','editor']"`)
  }
}
export default {
  inserted(el, binding) {
    checkPermission(el, binding)
  },
  update(el, binding) {
    checkPermission(el, binding)
  }
}`

src/directive/permission/index.js

import permission from './permission'
 
const install = function(Vue) {
  Vue.directive('permission', permission)
}
 
if (window.Vue) {
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}
 
permission.install = install
export default permission

mian.js中全局注册

import permission from './directive/permission'
Vue.use(permission)

vue页面v-permission指令的使用

<span v-permission="['admin','editor']"></span>

``