vue3实现按钮级别权限控制的两种方法
作者：前端小怪兽zmy
本文给大家介绍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')) || 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>注意Vue中规定：
- 注册指令时，不能包含
v-前缀（v-是模板中使用时的固定前缀）。 - 指令名称如果是多个单词，推荐使用短横线分隔命名（如
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>使用：
<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>到此这篇关于vue3实现按钮级别权限控制的两种方法的文章就介绍到这了,更多相关vue按钮级别权限控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！