在 Vue3 + TypeScript 項(xiàng)目中，可以通過自定義指令來控制元素的顯示與隱藏，實(shí)現(xiàn)權(quán)限管理功能。本文將詳細(xì)介紹如何編寫一個 v-permission 指令來根據(jù)用戶權(quán)限動態(tài)控制元素的渲染。

功能概述

v-permission 是一個自定義指令，作用如下：

• 傳入一個權(quán)限數(shù)組，例如 ['OrderList']。
• 從 Vuex 中獲取用戶擁有的權(quán)限列表。
• 如果用戶沒有指定權(quán)限，則從 DOM 中移除對應(yīng)元素。
• 支持動態(tài)更新，通過 updated 鉤子重新檢查權(quán)限。

實(shí)現(xiàn)步驟

1. 新建 directives/permission.ts

在項(xiàng)目的 directives 目錄下新建 permission.ts，內(nèi)容如下：

import { App, DirectiveBinding } from 'vue';
import store from '@/store';

// 判斷是否有權(quán)限
const hasPermission = (value: Array<string>, el: Element) => {
  // 檢查是否配置了權(quán)限參數(shù)
  if (!Array.isArray(value) || value.length === 0) {
    throw new Error(`v-permission 需要配置權(quán)限，例如 v-permission="['xxx']"`);
  }

  // 獲取用戶權(quán)限
  const ruleNames: Array<string> = store.getters['menu/getRuleNames'] || [];
  if (!Array.isArray(ruleNames)) {
    console.warn('權(quán)限數(shù)據(jù) "menu/getRuleNames" 格式不正確，請檢查 store 配置。');
    return;
  }

  // 判斷是否有權(quán)限
  const hasAuth = value.some((val) => ruleNames.includes(val));
  if (!hasAuth && el.parentNode) {
    el.parentNode.removeChild(el); // 移除元素
  }
  return hasAuth;
};

export default {
  install(app: App) {
    app.directive('permission', {
      mounted(el: Element, binding: DirectiveBinding) {
        hasPermission(binding.value, el);
      },
      updated(el: Element, binding: DirectiveBinding) {
        hasPermission(binding.value, el);
      },
    });
  },
};

功能說明

• mounted 鉤子：元素掛載時檢查權(quán)限，如果沒有權(quán)限，移除元素。
• updated 鉤子：元素或綁定值更新時重新檢查權(quán)限。
• 錯誤提示：當(dāng)傳入的值不正確時，拋出錯誤或給出警告。
• store.getters['menu/getRuleNames'] ：假設(shè)從 Vuex 中獲取用戶權(quán)限列表，返回一個字符串?dāng)?shù)組。

2. 在 main.ts 中引入指令

在 main.ts 文件中注冊該指令：

import { createApp } from 'vue';
import App from './App.vue';
import store from '@/store';
import permission from '@/directives/permission';

const app = createApp(App);
app.use(store);
app.use(permission); // 注冊自定義指令
app.mount('#app');

3. 使用 v-permission 指令

在模板中使用 v-permission 指令，傳入權(quán)限數(shù)組：

<template>
  <div>
    <!-- 用戶擁有 'OrderList'權(quán)限時顯示 -->
    <button v-permission="['OrderList']">有權(quán)限的按鈕</button>

    <!-- 僅管理員權(quán)限時顯示 -->
    <div v-permission="['admin']">僅管理員可見內(nèi)容</div>
  </div>
</template>

4.權(quán)限數(shù)據(jù)說明

假設(shè) store.getters['menu/getRuleNames'] 返回如下權(quán)限數(shù)組：

['OrderList', 'admin', 'user:read']

• 如果傳入 ['admin']，當(dāng)前用戶擁有該權(quán)限，則元素顯示。
• 如果傳入 ['user:write']，當(dāng)前用戶沒有該權(quán)限，則元素被移除

完整流程回顧

• 定義 permission 指令：判斷權(quán)限并移除無權(quán)限的元素。
• 注冊指令：在 main.ts 中注冊全局指令。
• 使用指令：在模板中使用 v-permission，傳入所需權(quán)限數(shù)組。
• 支持動態(tài)更新：元素更新時會重新檢查權(quán)限。

注意事項(xiàng)

• store.getters 配置：確保權(quán)限數(shù)據(jù)正確配置在 Vuex 中，并返回一個數(shù)組格式。
• 傳參校驗(yàn)：v-permission 綁定的值必須是數(shù)組，否則會拋出錯誤。
• 動態(tài)權(quán)限變化：如果權(quán)限列表動態(tài)更新，需要確保頁面重新渲染或觸發(fā)指令的 updated 鉤子。

總結(jié)

通過 v-permission 自定義指令，可以在 Vue3 項(xiàng)目中輕松實(shí)現(xiàn)權(quán)限控制，移除無權(quán)限的元素，提升用戶體驗(yàn)和項(xiàng)目安全性。根據(jù)實(shí)際需求，還可以進(jìn)一步擴(kuò)展此指令，例如實(shí)現(xiàn)隱藏元素而非移除元素、支持多種權(quán)限邏輯等。

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

最新評論