基于Ant Design Pro Vue 自定义按钮级别权限命令

• 在main.js全局定义自定义权限指令 v-auth

/** 权限指令**/
const auth = Vue.directive('auth', {
  inserted: function (el, binding) {
    if (!Vue.prototype.$_has(binding.value)) {
      el.parentNode.removeChild(el)
      // el.setAttribute('disabled', 'disabled')
      // el.setAttribute('class', el.getAttribute('class').concat(' is-disabled'))
    }
  }
})
// 权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = false
  // TODO 对接
  const buttonpermsStr = sessionStorage.getItem('buttenPermAdmin')
  if (buttonpermsStr === undefined || buttonpermsStr === null) {
    return false
  }
  const buttonperms = JSON.parse(buttonpermsStr)

  const arr = value.split(',')
  arr.map(valueItem => {
    buttonperms.some(item => {
      if (item === valueItem) {
        isExist = true
      }
    })
  })

• 用户登录后，保存用户按钮权限信息

getAuthorizedBtnAuthCode().then(res => {
            if (res.success) {
              const list = JSON.stringify(res.data)
              sessionStorage.setItem('buttenPermAdmin', list)
            }
          })

• 给按钮绑定自定义权限指令即可

<template>
<a-button type="primary" icon="plus" v-auth="query">查询</a-button>
</template>
<script>
export default {
	data () {
    	return {
    		query: 'admin:user:query'
    	}
    }
}
</script>