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

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

        <el-button
          type="primary"
          v-show-Permission
          v-preventReClick
          link
          @click="confirm(ConfirmationAction.DELETE, [row])"
          >删除
        </el-button>

<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>

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