前端权限控制（三）：根据后台接口数据传递页面按钮权限-自定义指令-实现按钮级权限控制

通过自定义指令来实现对按钮的控制

此实现是在前端权限控制（二）：实现页面级权限控制的基础上来进行的操作：前端权限控制（二）：实现页面级权限控制中，后端返回异步路由表中添加页面按钮权限字段，前端根据返回表中的权限来操作按钮。

------------------------------------------------------------------------

一：存储btn权限

1.1：传递的路由表中添加button字段：

 1.2：vuex存储权限字段

1.3：拦截路由获取权限

 

二：自定义指令

2.1：创建指令

创建src\directives文件夹

directives下index.js:

import BtnRole from './but-role'
// 自定义指令
const directives = {
    BtnRole
}

export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  }
}

but-role.js:

import Vue from 'vue'
import store from '@/store'
// 自定义指令，用来控制按钮权限
Vue.directive('BtnRole', {
  inserted(el, binding) {
    // 当前按钮传递的值( v-BtnRole="'add'" 中的值)
    const currentType = binding.value.type
    const effect = binding.value.effect
    // 获取到存放在 store 中的权限数据
    const currentRight = store.getters.buttonList
    // 如果不存在权限列表
    if (!currentRight) {
      el.parentNode.removeChild(el)
    } else {
      // 判断是否存在对应的按钮权限
      const item = currentRight.filter((item) => {
        return item === currentType
      })
      // 不具备权限则删除（隐藏）或者禁用该按钮 (el.parentNode 获取当前节点的父节点),根据在绑定的值去决定
      if (item.length === 0) {
        if (effect === 'disabled') {
          el.disabled = true
          el.classList.add('is-disabled')
        } else {
          el.parentNode.removeChild(el)
        }
      }
    }
  }
})

2.2：注册指令

在main.js中注册指令

import Directives from './directives'
Vue.use(Directives)

三：使用

// 使用示例：

// type为add,如果不具备权限则禁用按钮
<el-button v-BtnRole="{type:'add',effect:'disabled'}">SHOW ADD</el-button> 

// type为delete,如果不具备权限则删除按钮  
<el-button v-BtnRole="{type:'delete'}">SHOW DELETE</el-button>