聊一聊Vue如何實現角色權限的控制的
大家好，我是G探險者。關于角色與權限控制，通常是分為兩大類：一種是菜單權限；一種是數據權限。
菜單權限是指，每個角色對應著可以看到哪些菜單，至于每個菜單里面的每個按鈕，比如增刪改查等等這類按鈕控制不到這個粒度。簡單來說就是控制看到的菜單多少。
操作權限是指，每個角色對于所看到的數據具有哪些操作權限，就是增刪改查這些具體的操作，簡單來說就是讀寫權限。
一套完整的角色訪問控制：是應該包含這兩種控制的。通常二者也是交叉在一起進行訪問控制的。
Vue.js 提供了靈活的方式來實現角色權限控制，本文將深入探討如何通過 Vue 實現角色權限控制，特別是基于按鈕級別的權限控制。
1. 角色權限控制的概述
角色權限控制可以分為兩個層面：
- 菜單權限：決定用戶能看到哪些菜單和頁面。
- 操作權限：控制用戶對數據的操作權限，例如增、刪、改、查等。
在 Vue 中實現角色權限控制，通常是在前端頁面中動態渲染菜單和按鈕，并通過與后端權限數據的對比，來決定用戶是否有權限顯示和操作這些元素。本文重點討論如何實現按鈕級別的權限控制，即根據用戶的角色來控制他們能執行哪些操作。
2. 基本思路
角色權限控制的核心思想是：
- 用戶權限通過后端接口返回，前端根據這些權限數據來決定頁面中哪些按鈕顯示，哪些禁用，哪些完全移除。
- Vue 的動態渲染機制允許我們根據不同用戶的權限來動態控制按鈕的展示和行為，確保用戶只能看到和操作他們有權限訪問的功能。
3. Vue 實現角色權限控制
3.1 權限控制插件：v-perm-code
為了簡化權限控制的實現，我們可以創建一個自定義 Vue 指令 (v-perm-code)，該指令根據當前用戶的權限動態控制按鈕的顯示、禁用或移除。
3.1.1 指令的基本實現
首先，我們通過 Vue 的 Vue.directive 注冊一個名為 perm-code 的自定義指令，該指令在綁定時檢查每個按鈕的權限，并根據用戶的權限動態調整按鈕的狀態。
import { isObjectLike } from "lodash-es";
import { btnPermRemove, btnPermControl } from "globalSettings";
export default {
install(Vue) {
Vue.directive("perm-code", {
async bind(el, binding, vnode) {
// 開發模式下是否關閉按鈕級別權限控制
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;
// 動態獲取權限碼
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"];
// 根據權限控制按鈕的顯示和狀態
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)：每個按鈕的權限碼，通常由后端返回并與前端匹配，用于判斷用戶是否有權限執行某個操作。
- 權限列表 (permCodeList)：從 Vuex 中獲取當前用戶的權限列表，這些權限碼來自后端接口。
- 按鈕顯示/禁用/移除：
如果用戶有權限（即權限碼存在于 permCodeList 中），按鈕顯示并且可以點擊。
如果沒有權限，但 perm-show="true"，則按鈕仍然顯示，但禁用。
如果沒有權限且 perm-show 不為 true，按鈕會被從 DOM 中移除（如果 btnPermRemove 為 true）。
3.2 按鈕與權限結合：btnPermCode
在頁面組件中，每個按鈕都包含一個 btnPermCode 屬性，該屬性指定了與之關聯的權限碼。例如：
data() {
return {
buttonList: [
{
label: "新增",
type: "add",
click: this.openAdd,
btnPermCode: "add", // 權限碼
},
{
label: "刪除",
type: "delete",
click: this.clickDelete,
btnPermCode: "delete", // 權限碼
},
{
label: "發布",
type: "publish",
click: this.clickPublish,
btnPermCode: "publish", // 權限碼
},
// 更多按鈕...
],
};
},3.3 Vuex 與權限列表管理
用戶的權限列表存儲在 Vuex 中，通過后端接口動態獲取。當用戶訪問一個頁面時，Vuex 會存儲與該頁面相關的權限碼，指令 v-perm-code 會通過 Vuex 獲取這些權限，并根據權限決定按鈕的展示。
const permCodeList = _store.getters["router/permCodeList"];通過這種方式，前端可以確保根據當前用戶的角色，動態顯示和操作相關功能。
3.4 實際應用
在實際應用中，通常會有以下幾種按鈕操作：
- 增刪改查：用戶可以根據權限執行不同的數據操作，如新增、刪除、編輯、查看等。
- 批量操作：例如批量刪除、批量發布，前端根據權限判斷是否顯示這些操作按鈕。
- 導入導出：當用戶擁有導入導出的權限時，顯示相應的按鈕，否則不顯示。
4. 總結
通過 Vue 的自定義指令和 Vuex 的權限管理，我們可以在前端實現細粒度的角色權限控制。v-perm-code 指令結合 btnPermCode 和權限碼列表，實現了基于權限的按鈕顯示、禁用、移除等功能。后端返回的權限數據與前端進行匹配，確保用戶只能訪問和操作他們有權限的功能。這種方式使得前端權限控制更加靈活和可維護，適用于大多數基于角色的權限管理系統。
通過這種方式，我們可以在 Vue 中高效地實現角色權限管理，確保不同角色的用戶只看到和操作他們有權限的頁面和功能，提高了系統的安全性和用戶體驗。
