vue如何實現(xiàn)角色權限的控制

更新時間：2025年02月17日 08:17:29 作者：G探險者

關于角色與權限控制,通常是分為兩大類,一種是菜單權限,一種是操作權限,本文將深入探討如何通過?Vue?實現(xiàn)角色權限控制,特別是基于按鈕級別的權限控制,需要的可以了解下

1. 角色權限控制的概述

角色權限控制可以分為兩個層面：

菜單權限：決定用戶能看到哪些菜單和頁面。
操作權限：控制用戶對數(shù)據(jù)的操作權限，例如增、刪、改、查等。

在 Vue 中實現(xiàn)角色權限控制，通常是在前端頁面中動態(tài)渲染菜單和按鈕，并通過與后端權限數(shù)據(jù)的對比，來決定用戶是否有權限顯示和操作這些元素。本文重點討論如何實現(xiàn)按鈕級別的權限控制，即根據(jù)用戶的角色來控制他們能執(zhí)行哪些操作。

2. 基本思路

角色權限控制的核心思想是：

用戶權限通過后端接口返回，前端根據(jù)這些權限數(shù)據(jù)來決定頁面中哪些按鈕顯示，哪些禁用，哪些完全移除。
Vue 的動態(tài)渲染機制允許我們根據(jù)不同用戶的權限來動態(tài)控制按鈕的展示和行為，確保用戶只能看到和操作他們有權限訪問的功能。

3. Vue 實現(xiàn)角色權限控制

3.1 權限控制插件：v-perm-code

為了簡化權限控制的實現(xiàn)，我們可以創(chuàng)建一個自定義 Vue 指令 (v-perm-code)，該指令根據(jù)當前用戶的權限動態(tài)控制按鈕的顯示、禁用或移除。

3.1.1 指令的基本實現(xiàn)

首先，我們通過 Vue 的 Vue.directive 注冊一個名為 perm-code 的自定義指令，該指令在綁定時檢查每個按鈕的權限，并根據(jù)用戶的權限動態(tài)調整按鈕的狀態(tài)。

import { isObjectLike } from "lodash-es";
import { btnPermRemove, btnPermControl } from "globalSettings";

export default {
  install(Vue) {
    Vue.directive("perm-code", {
      async bind(el, binding, vnode) {
        // 開發(fā)模式下是否關閉按鈕級別權限控制
        if (!btnPermControl) return;

        let { value: permCode } = binding;  // 獲取按鈕的權限碼
        if (!permCode) return false;  // 如果沒有權限碼則退出

        const dom = el;
        const _store = vnode.context.$store;
        let pathnameCurrent = vnode.context.$route.path;
        if (!pathnameCurrent) pathnameCurrent = location.pathname;
        const pathnameStore = _store.state.router.pathname;

        // 動態(tài)獲取權限碼
        if (isObjectLike(permCode)) {
          permCode = Vue.filter(permCode.filter)(permCode.value);
        }

        // 是否顯示無權限的按鈕但禁用
        const permShow = el.getAttribute("perm-show") === "true";

        // 從store獲取權限碼列表
        if (pathnameCurrent && pathnameStore !== pathnameCurrent) {
          await _store.dispatch("router/getCurrentPermList", pathnameCurrent);
        }

        const permCodeList = _store.getters["router/permCodeList"];

        // 根據(jù)權限控制按鈕的顯示和狀態(tài)
        dom.setAttribute("perm-code", permCode);
        if (permCodeList.includes(permCode)) {
          dom.style.display = "inline-block";
          dom.title = `有權限按鈕: ${permCode}`;
        } else if (permShow) {
          dom.style.display = "inline-block";
          dom.setAttribute("disabled", "disabled");
        } else {
          dom.title = `無權限按鈕: ${permCode}`;
          if (btnPermRemove) {
            setTimeout(() => {
              dom.parentNode.removeChild(el);  // 移除無權限按鈕
            }, 0);
          } else {
            dom.style.display = "inline-block";
          }
        }
      },
    });
  },
};

3.1.2 指令的核心邏輯

權限碼 (permCode)：每個按鈕的權限碼，通常由后端返回并與前端匹配，用于判斷用戶是否有權限執(zhí)行某個操作。
權限列表 (permCodeList)：從 Vuex 中獲取當前用戶的權限列表，這些權限碼來自后端接口。
按鈕顯示/禁用/移除：
- 如果用戶有權限（即權限碼存在于 permCodeList 中），按鈕顯示并且可以點擊。
- 如果沒有權限，但 perm-show="true"，則按鈕仍然顯示，但禁用。
- 如果沒有權限且 perm-show 不為 true，按鈕會被從 DOM 中移除（如果 btnPermRemove 為 true）。

3.2 按鈕與權限結合：btnPermCode

在頁面組件中，每個按鈕都包含一個 btnPermCode 屬性，該屬性指定了與之關聯(lián)的權限碼。例如：

data() {
  return {
    buttonList: [
      {
        label: "新增",
        type: "add",
        click: this.openAdd,
        btnPermCode: "add",  // 權限碼
      },
      {
        label: "刪除",
        type: "delete",
        click: this.clickDelete,
        btnPermCode: "delete",  // 權限碼
      },
      {
        label: "發(fā)布",
        type: "publish",
        click: this.clickPublish,
        btnPermCode: "publish",  // 權限碼
      },
      // 更多按鈕...
    ],
  };
},

3.3 Vuex 與權限列表管理

用戶的權限列表存儲在 Vuex 中，通過后端接口動態(tài)獲取。當用戶訪問一個頁面時，Vuex 會存儲與該頁面相關的權限碼，指令 v-perm-code 會通過 Vuex 獲取這些權限，并根據(jù)權限決定按鈕的展示。

const permCodeList = _store.getters["router/permCodeList"];

通過這種方式，前端可以確保根據(jù)當前用戶的角色，動態(tài)顯示和操作相關功能。

3.4 實際應用

在實際應用中，通常會有以下幾種按鈕操作：

增刪改查：用戶可以根據(jù)權限執(zhí)行不同的數(shù)據(jù)操作，如新增、刪除、編輯、查看等。
批量操作：例如批量刪除、批量發(fā)布，前端根據(jù)權限判斷是否顯示這些操作按鈕。
導入導出：當用戶擁有導入導出的權限時，顯示相應的按鈕，否則不顯示。

4. 總結

通過 Vue 的自定義指令和 Vuex 的權限管理，我們可以在前端實現(xiàn)細粒度的角色權限控制。v-perm-code 指令結合 btnPermCode 和權限碼列表，實現(xiàn)了基于權限的按鈕顯示、禁用、移除等功能。后端返回的權限數(shù)據(jù)與前端進行匹配，確保用戶只能訪問和操作他們有權限的功能。這種方式使得前端權限控制更加靈活和可維護，適用于大多數(shù)基于角色的權限管理系統(tǒng)。

通過這種方式，我們可以在 Vue 中高效地實現(xiàn)角色權限管理，確保不同角色的用戶只看到和操作他們有權限的頁面和功能，提高了系統(tǒng)的安全性和用戶體驗。

到此這篇關于vue如何實現(xiàn)角色權限的控制的文章就介紹到這了,更多相關vue角色權限內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: