feat(rbac): F3 前端 RBAC 按钮级控制

后端:
- 新增 GET /user/permissions 端点返回当前用户权限码
- Login 响应附带 permissions 数组
- collectUserPermissionCodes 用 raw SQL JOIN 避免 GORM many2many 表名问题
- admin 用户返回 ['*'] 通配符

前端:
- usePermission hook (hasPermission/hasAnyPermission/hasAllPermissions)
- <HasPermission> 组件 (permission/anyOf/allOf + fallback)
- zustand store 新增 permissions 字段
- Sidebar 菜单递归过滤 (42 菜单项全部标注 permission)
- ServerManager: 添加/导入/批量删除按钮按权限显隐
- ServerTableRow: 终端/编辑/文件/删除按权限显隐
- SystemUserTab: 新建/导入/编辑/删除按钮按权限显隐
- MainLayout: 页面刷新自动拉取权限
- Login: 登录时存储 permissions

验证:
- admin: permissions=['*'] 通配符
- viewer: 7 个只读权限 (dashboard:view/server:view/...)
- viewer 无 server:create/delete
- 10/10 回归测试通过
- npm run build 零错误
This commit is contained in:
attacker committed 2026-06-25 22:51:25 +08:00
1 parent 77c234b060
commit be2a377f01
30 files changed
+2328 -462

No files matched your search

+61
View File
@@ -0,0 +1,61 @@
/**
* usePermission — 前端 RBAC 按钮级权限控制 Hook
*
* 设计:
* - 权限码存储在 zustand user store 的 `permissions` 字段
* - admin 用户 permissions = ["*"],所有 hasPermission 返回 true
* - 普通用户精确匹配权限码
* - 权限未加载(null)时默认放行(避免页面空白闪烁),加载后过滤
*
* 用法:
* const { hasPermission, hasAnyPermission } = usePermission();
* if (hasPermission('server:create')) { ... }
*
* 或用 <HasPermission> 组件包裹:
* <HasPermission permission="server:delete">
* <Button>删除</Button>
* </HasPermission>
*/
import { useUserStore } from '@/store';
// 权限通配符 — admin 用户拥有
const WILDCARD = '*';
export function usePermission() {
const permissions = useUserStore((s) => s.permissions);
// admin 通配符短路
const isAdmin = permissions?.includes(WILDCARD) ?? false;
/**
* 检查是否拥有指定权限
* @param code 权限码,如 'server:create'
* @returns true=有权限;permissions 未加载时默认 true
*/
const hasPermission = (code: string): boolean => {
// 权限未加载(登录后未调用 setPermissions)→ 默认放行
if (permissions === null || permissions === undefined) return true;
if (isAdmin) return true;
return permissions.includes(code);
};
/**
* 检查是否拥有任意一个权限(OR 逻辑)
*/
const hasAnyPermission = (codes: string[]): boolean => {
if (permissions === null || permissions === undefined) return true;
if (isAdmin) return true;
return codes.some((c) => permissions.includes(c));
};
/**
* 检查是否拥有全部权限(AND 逻辑)
*/
const hasAllPermissions = (codes: string[]): boolean => {
if (permissions === null || permissions === undefined) return true;
if (isAdmin) return true;
return codes.every((c) => permissions.includes(c));
};
return { hasPermission, hasAnyPermission, hasAllPermissions, isAdmin };
}