Vue2通过directive自定义指令实现按钮级别的权限控制

　　需求：不做路由的权限，只是要实现按钮级别的权限控制，具体实现方法，利用vue的directive自定义指令，在用户登录的时候获取当前用户的权限，处理好后端给的数据后，通过Vuex存起来。登录后，用户没有权限就删除相关节点，有权限就不处理，做到按钮级别的权限控制。具体代码如下！

/*
 * @Author: lzx
 * @Date: 2021-10-18 09:01:36
 * @LastEditors: lzx
 * @LastEditTime: 2021-12-10 15:35:28
 * @Description: Fuck Bug
 * @FilePath: \xsy-auth\src\util\auth.js
 */
import Vue from 'vue'
// 使用自定义指令v-auth做按钮权限控制
Vue.directive('auth', {
  inserted (el, bindings, vnode) {
    const isSuperAdmin = sessionStorage.getItem('isSuperAdmin')
    // 这里校验，如果是系统默认的超级管理员就绕过权限校验
    if (isSuperAdmin === '1') {
    } else {
      // 获取值
      const authValue = bindings.value
      // 获取值的状态
      const openOfClose = vnode.context.$store.state.auth.target[authValue]
      // 为true就显示，否则删除元素
      !openOfClose && el.parentNode.removeChild(el)
    }
  }
})

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 当前用户权限
    auth: {}
  },
  // 获取user
  getters: {
    getUser (state) {
    }
  },
  // 唯一可以修改state
  mutations: {
    updataAuth (state, auth) {
      state.auth = auth
    }
  },
  // 异步执行mutations方法
  actions: {
    asyncupdataAuth (context, auth) {
      context.commit('updataAuth', auth)
    }
  },
  modules: {
  }
})

// 全局引入自定义指令的按钮权限控制
import './util/auth'

登录成功->获取权限列表->处理数据->存入Vuex
// 对象合并 数组转对象
  const target = {}
  authArr.forEach(auth => {
    const source = JSON.parse(`{"${auth.mark}":${auth.url}}`) // 利用JSON.parse将对象,格式直接造出来
      Object.assign(target, source)
  })
this.$store.dispatch('asyncupdataAuth', { target })

<el-button v-auth="'delete'">
  <i class="iconfont icon-btn_shanchu"></i>
  删除
</el-button>