Vue2通过directive自定义指令实现按钮级别的权限控制 　　需求：不做路由的权限，只是要实现按钮级别的权限控制，具体实现方法，利用vue的directive自定义指令，在用户登录的时候获取当前用户的权限，处理好后端给的数据后，通过Vuex存起来。登录后，用户没有权限就删除相关节点，有权限就不处理，做到按钮级别的权限控制。具体代码如下！{mtitle title="新建auth.js"/}/* * @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) } } }){mtitle title="Vuex的配置"/}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: { } }){mtitle title="main.js全局引入auth.js"/}// 全局引入自定义指令的按钮权限控制 import './util/auth'{mtitle title="登录的处理"/}登录成功->获取权限列表->处理数据->存入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 }){mtitle title="页面的使用"/}<el-button v-auth="'delete'"> <i class="iconfont icon-btn_shanchu"></i> 删除 </el-button>