快捷導(dǎo)航

vue3實(shí)現(xiàn)按鈕級(jí)別權(quán)限控制的兩種方法

更新時(shí)間：2025年08月13日 11:54:59 作者：前端小怪獸zmy

本文給大家介紹vue3實(shí)現(xiàn)按鈕級(jí)別權(quán)限控制的兩種方法,每種方法結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

方法一：自定義指令

封裝自定義指令（同時(shí)在main.ts中 app.directive('show-Permission', showPermission)掛載全局）

/**
 * 檢查是否有展示權(quán)限，sessionStorage.getItem('isWhiteUser')從后端獲得
 * @returns 是否有白名單用戶的權(quán)限
 */
function hasShowPermission(): boolean {
  const isWhiteUser = JSON.parse(sessionStorage.getItem('isWhiteUser')) || null
  return isWhiteUser
}
/**
 * 權(quán)限指令邏輯
 * @param el 具體元素
 */
function checkShowPermission(el: HTMLElement) {
  if (!hasShowPermission()) {
    // 無權(quán)限時(shí)移除元素
    el.parentNode?.removeChild(el)
  }
}
/**
 * 自定義指令：按鈕級(jí)權(quán)限控制
 */
export default {
  mounted(el: HTMLElement) {
    checkShowPermission(el)
  }
}

注意一下優(yōu)先級(jí)：

按鈕直接使用：

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

注意Vue中規(guī)定：

注冊(cè)指令時(shí)，不能包含 v- 前綴（v- 是模板中使用時(shí)的固定前綴）。
指令名稱如果是多個(gè)單詞，推薦使用短橫線分隔命名（如 show-permission），模板中直接用 v-指令名 調(diào)用

方法二：封裝組件

在Vue 3 中，$attrs 會(huì)自動(dòng)包含所有傳遞給組件的屬性和事件

<template>
  <el-button v-if="hasPermission" v-bind="$attrs">
  <!-- 傳遞插槽內(nèi)容（如圖標(biāo)和文本） -->
    <slot />
  </el-button>
</template>
<script setup lang="ts">
import { computed } from 'vue'
// 檢查是否有權(quán)限
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>

到此這篇關(guān)于vue3實(shí)現(xiàn)按鈕級(jí)別權(quán)限控制的兩種方法的文章就介紹到這了,更多相關(guān)vue按鈕級(jí)別權(quán)限控制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue之el-upload使用FormData多文件同時(shí)上傳問題
這篇文章主要介紹了vue之el-upload使用FormData多文件同時(shí)上傳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue專屬狀態(tài)管理庫(kù)Pinia的使用與實(shí)踐分享
在 Vue 的開發(fā)中,狀態(tài)管理是一個(gè)不可或缺的部分,尤其是在復(fù)雜的應(yīng)用中,組件之間的狀態(tài)共享和管理變得至關(guān)重要,Pinia 作為 Vue 的專屬狀態(tài)管理庫(kù),本文將深入介紹 Pinia 的基礎(chǔ)知識(shí)、核心功能以及實(shí)際使用場(chǎng)景,需要的朋友可以參考下
2024-11-11
一文帶你深入理解Vue3中Composition API的使用
Composition API 是 Vue 3 中的一項(xiàng)強(qiáng)大功能,它改進(jìn)了代碼組織和重用,使得構(gòu)建組件更加靈活和可維護(hù),本文我們將深入探討 Composition API 的各個(gè)方面,希望對(duì)大家有所幫助
2023-10-10
vue?iview?導(dǎo)航高亮動(dòng)態(tài)設(shè)置方式
這篇文章主要介紹了vue?iview?導(dǎo)航高亮動(dòng)態(tài)設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
簡(jiǎn)單理解vue中Props屬性
這篇文章主要幫助大家簡(jiǎn)單的理解vue中Props屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
Vue?服務(wù)端渲染SSR示例詳解
這篇文章主要介紹了Vue?服務(wù)端渲染SSR示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue3 編寫自定義指令插件的示例代碼
這篇文章主要介紹了Vue3 編寫自定義指令插件的示例代碼,主要包括編寫自定義插件，在 main.ts 中加載啟用插件的代碼介紹，對(duì)Vue3自定義指令插件相關(guān)知識(shí)感興趣的朋友一起看看吧
2022-07-07
elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出的問題解決
這篇文章主要介紹了elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出閉時(shí)自動(dòng)彈出的問題,主要問題就是因?yàn)閒ilterable屬性,根本解決方案是選中的時(shí)候讓他失去焦點(diǎn)?el-select有一個(gè)visible-change事件,下拉框出現(xiàn)/隱藏時(shí)觸發(fā),感興趣的朋友跟隨小編一起看看吧
2024-01-01
Vue中nprogress頁(yè)面加載進(jìn)度條的方法實(shí)現(xiàn)
這篇文章主要介紹了Vue中nprogress頁(yè)面加載進(jìn)度條的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
Vue3 全局使用按鈕截流指令示例代碼
這篇文章主要介紹了Vue3 全局使用按鈕截流指令示例代碼,Vue2與Vue3中的自定義指令實(shí)現(xiàn)方式略有不同，但實(shí)現(xiàn)的按鈕截流功能是類似的，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-05-05