大家好，我是G探險(xiǎn)者。關(guān)于角色與權(quán)限控制，通常是分為兩大類：一種是菜單權(quán)限；一種是數(shù)據(jù)權(quán)限。

菜單權(quán)限是指，每個(gè)角色對(duì)應(yīng)著可以看到哪些菜單，至于每個(gè)菜單里面的每個(gè)按鈕，比如增刪改查等等這類按鈕控制不到這個(gè)粒度。簡(jiǎn)單來(lái)說(shuō)就是控制看到的菜單多少。

操作權(quán)限是指，每個(gè)角色對(duì)于所看到的數(shù)據(jù)具有哪些操作權(quán)限，就是增刪改查這些具體的操作，簡(jiǎn)單來(lái)說(shuō)就是讀寫(xiě)權(quán)限。

一套完整的角色訪問(wèn)控制：是應(yīng)該包含這兩種控制的。通常二者也是交叉在一起進(jìn)行訪問(wèn)控制的。

Vue.js 提供了靈活的方式來(lái)實(shí)現(xiàn)角色權(quán)限控制，本文將深入探討如何通過(guò) Vue 實(shí)現(xiàn)角色權(quán)限控制，特別是基于按鈕級(jí)別的權(quán)限控制。

1. 角色權(quán)限控制的概述

角色權(quán)限控制可以分為兩個(gè)層面：

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

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

2. 基本思路

角色權(quán)限控制的核心思想是：

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

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

3.1 權(quán)限控制插件：v-perm-code

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

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

首先，我們通過(guò) Vue 的 Vue.directive 注冊(cè)一個(gè)名為 perm-code 的自定義指令，該指令在綁定時(shí)檢查每個(gè)按鈕的權(quán)限，并根據(jù)用戶的權(quán)限動(dòng)態(tài)調(diào)整按鈕的狀態(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) {
        // 開(kāi)發(fā)模式下是否關(guān)閉按鈕級(jí)別權(quán)限控制
        if (!btnPermControl) return;

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

        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;

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

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

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

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

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

3.1.2 指令的核心邏輯

• 權(quán)限碼 (permCode)：每個(gè)按鈕的權(quán)限碼，通常由后端返回并與前端匹配，用于判斷用戶是否有權(quán)限執(zhí)行某個(gè)操作。
• 權(quán)限列表 (permCodeList)：從 Vuex 中獲取當(dāng)前用戶的權(quán)限列表，這些權(quán)限碼來(lái)自后端接口。
• 按鈕顯示/禁用/移除：

如果用戶有權(quán)限（即權(quán)限碼存在于 permCodeList 中），按鈕顯示并且可以點(diǎn)擊。

如果沒(méi)有權(quán)限，但 perm-show="true"，則按鈕仍然顯示，但禁用。

如果沒(méi)有權(quán)限且 perm-show 不為 true，按鈕會(huì)被從 DOM 中移除（如果 btnPermRemove 為 true）。

3.2 按鈕與權(quán)限結(jié)合：btnPermCode

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

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

3.3 Vuex 與權(quán)限列表管理

用戶的權(quán)限列表存儲(chǔ)在 Vuex 中，通過(guò)后端接口動(dòng)態(tài)獲取。當(dāng)用戶訪問(wèn)一個(gè)頁(yè)面時(shí)，Vuex 會(huì)存儲(chǔ)與該頁(yè)面相關(guān)的權(quán)限碼，指令 v-perm-code 會(huì)通過(guò) Vuex 獲取這些權(quán)限，并根據(jù)權(quán)限決定按鈕的展示。

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

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

3.4 實(shí)際應(yīng)用

在實(shí)際應(yīng)用中，通常會(huì)有以下幾種按鈕操作：

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

4. 總結(jié)

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

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