通过VUE指令和pinia控制按钮权限

• 权限state

import {defineStore} from "pinia/dist/pinia";

// 用户权限状态
export const userPermission = defineStore('userPermission', {
    // 状态
    state: () => {
        return {
            permissions: ['add', 'delete']
        }
    },
    actions: {},
    // 状态的一些方法，类似于计算属性
    getters: {}
})

• 编写指令

import {userPermission} from "./state/pinia-state";

let permissions = userPermission()

app.directive('permission', (el, binding) => {
    if (permissions.permissions.indexOf(binding.value) < 0) {
        // 移除当前元素
        el.parentNode.removeChild(el)
    }
})

• 按钮需要的权限

  <el-row class="mb-4">
    <el-button v-permission="`add`">增1</el-button>
    <el-button v-permission="`delete`" type="primary">删2</el-button>
    <el-button v-permission="`a1`" type="success">改3</el-button>
  </el-row>

• 效果

image.png