🧠 前端權限與登錄驗證體系
🔐 1. 認證機制 (Authentication)
核心目標：確認“你是誰”，保持登錄狀態
-
Token 方案 (JWT)
- 流程：登錄 → 後端簽發 Token → 前端存儲 → 請求攜帶 Token → 後端驗證
-
存儲位置
- localStorage：常用，持久化好，但需防 XSS。
- HttpOnly Cookie：防 XSS 竊取，安全性高，需防 CSRF。
- 內存：最安全（防 XSS），但刷新丟失。
-
無感刷新 (雙 Token)
- Access Token (AT)：短期有效（如 15分鐘），用於接口請求。
- Refresh Token (RT)：長期有效（如 7天），僅用於換取新的 AT。
- 邏輯：接口返回 401 時，用 RT 換 AT，成功後重試原請求。
🧭 2. 路由守衞與登錄攔截
核心目標：攔截未登錄訪問，控制頁面入口
-
白名單機制
- 定義：['/login', '/register', '/404']
-
邏輯：
- 目標路由在白名單內 → 直接放行。
-
不在白名單 → 檢查 Token。
- 有 Token → 放行。
- 無 Token → 重定向到 /login。
-
路由守衞 (Vue: beforeEach / React: Route Guard)
- 全局前置守衞：處理登錄跳轉邏輯。
- 避免死循環：確保登錄頁本身在白名單中，且登錄後重定向要正確處理。
🗺️ 3. 路由與菜單控制 (Authorization)
核心目標：控制用户能看到什麼頁面和菜單
-
動態路由加載
- 時機：登錄成功後或路由守衞中。
-
步驟：
- 拉取數據：調用接口獲取用户菜單/路由數據。
- 格式轉換：將後端返回的字符串組件路徑映射為真實的組件引用（import）。
- 掛載路由：調用 router.addRoute 動態添加到路由表。
-
菜單渲染
- 數據源：使用動態加載並過濾後的路由數據。
- 渲染：將數據傳給側邊欄組件（如 el-menu）進行遞歸渲染。
🎮 4. 按鈕與元素級權限
核心目標：控制頁面內的具體操作
-
自定義指令 (Vue: v-permission / React: HOC/Component)
- 原理：對比“用户權限列表”與“元素所需權限”。
-
行為：
- 隱藏：無權限時從 DOM 中移除元素（推薦）。
- 禁用：無權限時置灰按鈕（el.disabled = true）。
-
邏輯控制
- 支持單權限字符串（'user:add'）。
- 支持多權限邏輯（數組 ['user:add', 'admin']，支持 AND/OR）。
🛡️ 5. 安全原則與最佳實踐
核心目標：保證系統安全，防止越權
-
核心鐵律
- 前端權限僅為體驗：前端隱藏按鈕/菜單只是為了不讓用户“誤操作”或“看到不該看的”。
- 後端校驗才是底線：每一個敏感接口（增刪改查）都必須在後端進行權限校驗。
-
防篡改
- localStorage 數據易被篡改（F12 修改），絕對不要在前端存儲敏感的業務邏輯判斷。
- 敏感操作（如支付、刪除）建議增加二次驗證（短信驗證碼、密碼確認）。
-
狀態管理 (Pinia/Vuex)
- 非自動：需要手動在登錄成功後調用 setPermissions 存入狀態。
- 持久化：頁面刷新後，需從 localStorage 中手動恢復狀態。
📝 總結圖示
前端權限體系
├── 🔐 認證 (JWT + 雙Token)
├── 🧭 路由守衞 (白名單 + Token校驗)
├── 🗺️ 動態路由 (後端拉取 -> 格式轉換 -> addRoute)
├── 🎮 指令權限 (v-permission, 比對權限)
└── 🛡️ 安全核心
├── 前端控制展示 (面子)
└── 後端控制接口 (裏子)