Vue权限控制之按钮权限_vue权限到按钮分配权限的时候怎么弄-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_24504591/article/details/127275426

本文介绍如何在Vue项目中实现基于按钮级别的权限控制。通过Vuex管理全局状态，并利用自定义指令v-permission判断当前用户是否有权限展示某个DOM元素。若用户没有对应权限，则隐藏或移除该元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

store.js 全局数据缓存store设置

const store = new Vuex.Store({
  state: {
    permission_buttons: ['template:add']
  },
  getters:{
    permission_buttons: (state) => state.permission_buttons
  },
  mutations : {
    PERMISSION_BUTTONS: (state, data) => {
      state.permission_buttons = data
    }
  }
})

directive.js 自定义指令逻辑编写

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

// 注册一个全局自定义指令 `v-permission`
Vue.directive('permission', {
  // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = '*:*:*'
    const permissions = store.getters && store.getters.permission_buttons

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some((permission) => {
        return (
          all_permission === permission || permissionFlag.includes(permission)
        )
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
        // 或者：el.style.display = 'none'
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
})

main.js 引入

import './config/directive'

index.vue 使用

 <el-button
  type="primary"
  @click="handlerAdd"
  v-permission="['template:add']"
  >新增</el-button
>