vue3 两种方法实现 按钮级别权限控制

如修改、删除等按钮只对特定租户开放，在main.ts中，发送请求把数据存在sessionStorage中（true/false），最简单的方法，每个要进行权限判断的按钮都是用v-if

方法一：自定义指令

封装自定义指令（同时在main.ts中  app.directive('show-Permission', showPermission)挂载全局）

/*** 检查是否有展示权限，sessionStorage.getItem('isWhiteUser')从后端获得* @returns 是否有白名单用户的权限*/
function hasShowPermission(): boolean {const isWhiteUser = JSON.parse(sessionStorage.getItem('isWhiteUser')) || nullreturn isWhiteUser
}/*** 权限指令逻辑* @param el 具体元素*/
function checkShowPermission(el: HTMLElement) {if (!hasShowPermission()) {// 无权限时移除元素el.parentNode?.removeChild(el)}
}/*** 自定义指令：按钮级权限控制*/
export default {mounted(el: HTMLElement) {checkShowPermission(el)}
}

注意一下优先级：

按钮直接使用：

        <el-buttontype="primary"v-show-Permissionv-preventReClicklink@click="confirm(ConfirmationAction.DELETE, [row])">删除</el-button>

注意Vue中规定：

1. 注册指令时，不能包含 v- 前缀（v- 是模板中使用时的固定前缀）。
2. 指令名称如果是多个单词，推荐使用短横线分隔命名（如 show-permission），模板中直接用 v-指令名 调用

方法二：封装组件

在Vue 3 中，$attrs 会自动包含所有传递给组件的属性和事件

<template><el-button v-if="hasPermission" v-bind="$attrs"><!-- 传递插槽内容（如图标和文本） --><slot /></el-button>
</template><script setup lang="ts">
import { computed } from 'vue'// 检查是否有权限
const hasPermission = computed(() => {return JSON.parse(sessionStorage.getItem('isWhiteUser')) || null
})// 声明该组件不继承父组件的属性（让$attrs包含所有传递的属性）
defineOptions({inheritAttrs: false
})
</script>

使用：

    <testButtonv-show-Permissionv-show="props.activeName == tabNameConfig.CUSTOM"v-preventReClicktype="primary"class="btn-blue leftBtn"@click="confirm(ConfirmationAction.UPLOAD, [])"><img src="@/assets/images/upload.svg" alt="" />上传</testButton>