快捷導(dǎo)航

Vue 3 自定義權(quán)限指令 v-action的作用

更新時(shí)間：2025年04月02日 11:21:19 作者：代碼里的小貓咪

在實(shí)際的前端開(kāi)發(fā)中,尤其是涉及到權(quán)限管理的系統(tǒng),我們經(jīng)常需要根據(jù)用戶(hù)的權(quán)限動(dòng)態(tài)控制某些按鈕的顯示和隱藏,這篇文章主要介紹了Vue 3 自定義權(quán)限指令 v-action的相關(guān)知識(shí),需要的朋友可以參考下

在實(shí)際的前端開(kāi)發(fā)中，尤其是涉及到權(quán)限管理的系統(tǒng)，我們經(jīng)常需要根據(jù)用戶(hù)的權(quán)限動(dòng)態(tài)控制某些按鈕的顯示和隱藏。例如：在一個(gè)后臺(tái)管理系統(tǒng)中，不同角色的用戶(hù)可能擁有不同的操作權(quán)限，比如「查看」、「編輯」、「刪除」等。為了避免用戶(hù)無(wú)權(quán)操作某些功能，通常需要在組件或模板中手動(dòng)添加權(quán)限判斷邏輯。

然而，如果在每個(gè)需要權(quán)限控制的地方都手寫(xiě) v-if 或 v-show 來(lái)判斷，代碼會(huì)變得冗余且難以維護(hù)。為了解決這個(gè)問(wèn)題，可以利用 Vue 3 的自定義指令 來(lái)封裝權(quán)限控制邏輯，使得權(quán)限管理變得更直觀、可復(fù)用，進(jìn)而提升代碼的可讀性和可維護(hù)性。

舉出一個(gè)實(shí)際可用的 ??

/**
 * 根據(jù)權(quán)限（binding）決定 el 的顯示隱藏
 * @param {*} el 指令綁定的 DOM 元素，Vue 傳遞給指令的 el 參數(shù)
 * @param {*} binding 指令的綁定值對(duì)象，包含傳遞指令的值。比如：v-action="'actionCode'"，那么 binding.value 就是 'actionCode'。
 * @returns
 */
function updateVisibility(el, binding) {
  // 獲取權(quán)限列表
  const { _actions } = window;
  // 如果沒(méi)有指定權(quán)限值，默認(rèn)「顯示」
  if (!binding.value) {
    el.style.display = '';
    return;
  }
  // 根據(jù)權(quán)限判斷是否隱藏
  el.style.display = _actions && !_actions.includes(binding.value) ? 'none' : '';
}
// action：自定義指令對(duì)象
const action = {
  // 指令綁定的元素被插入到 DOM 時(shí)觸發(fā)
  mounted(el, binding) {
    updateVisibility(el, binding);
  },
  // 當(dāng)組件 props 或 data 發(fā)生變化導(dǎo)致 DOM 更新 時(shí)觸發(fā)。
  updated(el, binding) {
    updateVisibility(el, binding);
  },
};
// 注冊(cè)全局指令
export default {
  install(app) {
    // 在 Vue 應(yīng)用上 注冊(cè)全局指令 v-action，讓所有組件都可以使用 v-action 來(lái)控制元素的顯示。
    app.directive('action', action);
  },
};

這個(gè)代碼是一個(gè) Vue 3 的自定義指令（v-action），用于根據(jù)用戶(hù)的權(quán)限控制元素的顯示與隱藏。它會(huì)在 mounted 和 updated 階段檢查權(quán)限，并根據(jù)權(quán)限決定是否顯示元素。

?? 總結(jié)

v-action 這個(gè)指令的作用是 根據(jù)用戶(hù)權(quán)限 (window._actions) 控制元素的顯示。

用戶(hù)沒(méi)有權(quán)限 → 隱藏該元素（display: none）。
用戶(hù)有權(quán)限 → 顯示該元素（display: ''）。
沒(méi)有傳遞 v-action 的值 → 默認(rèn)顯示。

????????? 使用方式

在 Vue 組件的模板中：

<template>
  <button v-action="'_EDIT'">編輯</button>
</template>

只有 _actions 數(shù)組包含 '_EDIT'，按鈕才會(huì)顯示。如果 window._actions 不包含 '_EDIT'，按鈕會(huì)被隱藏。

這個(gè)代碼在 Vue 3 項(xiàng)目里非常實(shí)用，特別適用于 權(quán)限控制場(chǎng)景！

到此這篇關(guān)于Vue 3 自定義權(quán)限指令 v-action的作用的文章就介紹到這了,更多相關(guān)Vue自定義權(quán)限指令 v-action內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: