動(dòng)態(tài)權限角色系統

?? 系統概述

本系統實(shí)現了基于后端菜單數據的動(dòng)態(tài)權限角色生成，替代了原有的硬編碼角色列表。

?? 原有問(wèn)題

硬編碼角色列表

// ? 原有的硬編碼方式
roles: ['UserIndex', 'DashboardBase', 'login']

問(wèn)題：

• 權限固定，無(wú)法根據用戶(hù)實(shí)際權限動(dòng)態(tài)調整
• 新增菜單時(shí)需要手動(dòng)修改代碼
• 不同用戶(hù)擁有相同權限，無(wú)法實(shí)現精細化控制

? 新的解決方案

動(dòng)態(tài)權限生成

// ? 新的動(dòng)態(tài)生成方式
const userRoles = this.generateUserRoles(_menuList, _dataInfo);

??? 權限生成邏輯

1. 基礎權限分配

// ?? 所有登錄用戶(hù)的基礎權限
roles.push('login');           // 登錄權限
roles.push('DashboardBase');   // 儀表盤(pán)權限  
roles.push('UserIndex');      // 個(gè)人中心權限

2. 菜單權限映射

// ??? 菜單路徑到路由名稱(chēng)的映射
const pathToRouteMap = {
  '/dashboard': 'DashboardBase',
  '/dashboard/base': 'DashboardBase', 
  '/dashboard/detail': 'Detail',
  '/user': 'UserIndex',
  '/user/index': 'UserIndex',
  '/list': 'List',
  '/form': 'Form',
  // ... 可擴展
};

3. 超級管理員權限

// ?? 超級管理員檢查
if (dataInfo.LoginUser?.Username === 'host' || 
    dataInfo.LoginUser?.Grade === '0') {
  roles.push('all'); // 擁有所有權限
}

?? 核心方法說(shuō)明

generateUserRoles(menuList, dataInfo)

主要權限生成方法

• ?? 輸入：后端菜單列表 + 用戶(hù)詳細信息
• ?? 輸出：動(dòng)態(tài)生成的角色權限數組
• ?? 功能：根據用戶(hù)實(shí)際權限生成對應的前端路由權限

mapMenuPathToRouteName(menuPath)

菜單路徑映射方法

• ?? 輸入：后端菜單路徑（如 /dashboard/base）
• ?? 輸出：前端路由名稱(chēng)（如 DashboardBase）
• ?? 功能：建立后端菜單與前端路由的對應關(guān)系

extractRolesFromMenuChildren(children)

子菜單權限提取方法

• ?? 輸入：菜單子項列表
• ?? 輸出：從子菜單中提取的權限列表
• ?? 功能：遞歸處理多層級菜單結構

?? 權限控制流程

graph TD
    A[用戶(hù)登錄](méi) --> B[獲取用戶(hù)信息]
    B --> C[獲取菜單列表]
    C --> D[generateUserRoles]
    D --> E{用戶(hù)類(lèi)型判斷}
    E -->|超級管理員| F[添加 'all' 權限]
    E -->|普通用戶(hù)| G[基礎權限 + 菜單權限]
    F --> H[權限生成完成]
    G --> I[遍歷菜單列表]
    I --> J[路徑映射轉換]
    J --> K[遞歸處理子菜單]
    K --> H
    H --> L[更新用戶(hù)狀態(tài)]
    L --> M[路由權限控制]

?? 權限級別說(shuō)明

1. 基礎權限

['login', 'DashboardBase', 'UserIndex']

• 所有登錄用戶(hù)的基本權限
• 包含登錄、儀表盤(pán)、個(gè)人中心訪(fǎng)問(wèn)權限

2. 菜單權限

// 根據后端菜單動(dòng)態(tài)生成
['List', 'Form', 'Detail', 'Result', ...]

• 基于用戶(hù)實(shí)際菜單權限
• 動(dòng)態(tài)映射到前端路由權限

3. 超級管理員權限

['all']

• 擁有系統所有功能的訪(fǎng)問(wèn)權限
• 適用于系統管理員賬戶(hù)

?? 擴展指南

添加新的菜單權限映射

// 在 mapMenuPathToRouteName 方法中添加
const pathToRouteMap: Record<string, string> = {
  // 現有映射...
  '/new-module': 'NewModuleIndex',        // 新模塊
  '/new-module/list': 'NewModuleList',    // 新模塊列表
  '/new-module/detail': 'NewModuleDetail' // 新模塊詳情
};

自定義權限判斷邏輯

// 在 generateUserRoles 方法中添加自定義邏輯
if (dataInfo.LoginUser?.Department === 'IT') {
  roles.push('SystemManagement'); // IT部門(mén)特殊權限
}

if (dataInfo.LoginUser?.Level >= 5) {
  roles.push('AdvancedFeatures'); // 高級用戶(hù)權限
}

?? 注意事項

1. 權限映射維護

• 新增菜單時(shí)需要更新 pathToRouteMap 映射表
• 確保后端菜單路徑與前端路由名稱(chēng)的一致性

2. 性能考慮

• 權限生成在用戶(hù)信息獲取時(shí)執行
• 復雜的菜單結構可能影響生成性能
• 建議對大型菜單進(jìn)行緩存優(yōu)化

3. 安全性

• 前端權限僅用于UI控制
• 后端必須進(jìn)行相應的權限驗證
• 敏感操作需要額外的權限檢查

?? 使用示例

在組件中使用權限

<template>
  <div>
    <!-- 基于角色顯示內容 -->
    <div v-if="userStore.roles.includes('DashboardBase')">
      儀表盤(pán)內容
    </div>
    
    <!-- 超級管理員專(zhuān)用功能 -->
    <div v-if="userStore.roles.includes('all')">
      管理員功能
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
</script>

在路由守衛中使用

// 路由權限檢查
router.beforeEach((to, from, next) => {
  const userStore = useUserStore();
  const requiredRole = to.meta.roleCode || to.name;
  
  if (userStore.roles.includes('all') || 
      userStore.roles.includes(requiredRole)) {
    next(); // 有權限，允許訪(fǎng)問(wèn)
  } else {
    next('/403'); // 無(wú)權限，跳轉到403頁(yè)面
  }
});

現在您的權限系統可以根據后端返回的真實(shí)菜單數據動(dòng)態(tài)生成用戶(hù)角色，實(shí)現了更靈活和精確的權限控制！??