場景
用戶同時擁有:A 區管理員(可改刪)、B 區普通用戶(唯讀)。列表混合顯示 A、B 區數據,頁面有「修改/刪除」按鈕。
方案:前端顯示不隱藏,後端強校驗
- 前端:按鈕**始終顯示**(避免複雜權限計算導致 UI 閃爍/不一致)。
- 後端 API:每個修改/刪除接口,**強制校驗** `user.hasPermission(regionId, 'WRITE')`。
無權限 → 返回 `403 Forbidden` + 友好提示。
- 前端響應**:攔截 `403`,Toast 提示「無權限操作該區域數據」,按鈕置灰/loading 恢復。
優化體驗
- 列表數據返回時,附帶 `canEdit: true/false` 字段,前端**按行控制按鈕置灰/隱藏**,減少無效點擊。
- 權限判斷邏輯集中在 **權限服務/中間件**,業務代碼僅調用 `PermissionService.check(user, resource, action)`。
結論
**「操作時校驗」是業界標準做法**,前端提示僅為體驗優化,**安全邊界在後端**。