vue项目使用自定义指令实现按钮级权限管理

在后台管理项目上经常要求权限控制到按钮级，既如果当前登录用户没有新建、编辑、删除等权限就无法看到对应的功能按钮，这种需求可以使用vue的自定义指令实现

首先针对自定义指令进行封装

在util文件夹内新建permission.js

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

// 定义自定义指令
const has = Vue.directive('has', {
  bind: function (el, binding, vnode) {
    if (!Vue.prototype.$_has(binding.value)) {
      let className = el.getAttribute('class')
      if (className) {
        className = className.concat(' hiddenHandle')
      } else {
        className = 'hiddenHandle'
      }
      el.setAttribute('class', className)
    }
  }
})

// 定义用户权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = true
  const arrPermission = value.split(',')
  // 从vuex中获取用户的具体权限列表
  const PermissionsStr = store.getters.roles.permissionList
  if (PermissionsStr === undefined || PermissionsStr == null) {
    return false
  }
  arrPermission.forEach(item => {
    if (PermissionsStr.indexOf(item) === -1) {
      isExist = false
    }
  })
  return isExist
}
export default has

在main.js中引入，保证可以全局使用

import has from './util/permission'

Vue.use(has)

在全局样式中定义hiddenHandle为吟唱

.hiddenHandle{
  display: none !important;
}

在页面中的使用

<a-button v-has="'sys_role_add'" type="primary" icon="plus" @click="add">新建</a-button>