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:
1 parent
77c234b060
commit
be2a377f01
30 files changed
+2328
-462
No files matched your search
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* HasPermission — 条件渲染子组件(基于 RBAC 权限码)
|
||||
*
|
||||
* 用法:
|
||||
* <HasPermission permission="server:create">
|
||||
* <Button>新增服务器</Button>
|
||||
* </HasPermission>
|
||||
*
|
||||
* <HasPermission anyOf={['server:update', 'server:delete']}>
|
||||
* <Button>操作</Button>
|
||||
* </HasPermission>
|
||||
*
|
||||
* <HasPermission allOf={['server:update', 'server:webshell']}>
|
||||
* <Button>运维操作</Button>
|
||||
* </HasPermission>
|
||||
*
|
||||
* <HasPermission permission="server:delete" fallback={<span className="text-xs text-muted">无权限</span>}>
|
||||
* <Button>删除</Button>
|
||||
* </HasPermission>
|
||||
*/
|
||||
import type { ReactNode } from 'react';
|
||||
import { usePermission } from '@/hooks/usePermission';
|
||||
|
||||
interface HasPermissionProps {
|
||||
/** 单个权限码 */
|
||||
permission?: string;
|
||||
/** 任意一个即可(OR) */
|
||||
anyOf?: string[];
|
||||
/** 全部都要(AND) */
|
||||
allOf?: string[];
|
||||
/** 无权限时渲染的兜底内容 */
|
||||
fallback?: ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function HasPermission({
|
||||
permission,
|
||||
anyOf,
|
||||
allOf,
|
||||
fallback = null,
|
||||
children,
|
||||
}: HasPermissionProps) {
|
||||
const { hasPermission, hasAnyPermission, hasAllPermissions } = usePermission();
|
||||
|
||||
let ok = true;
|
||||
if (permission) ok = ok && hasPermission(permission);
|
||||
if (anyOf && anyOf.length > 0) ok = ok && hasAnyPermission(anyOf);
|
||||
if (allOf && allOf.length > 0) ok = ok && hasAllPermissions(allOf);
|
||||
|
||||
return <>{ok ? children : fallback}</>;
|
||||
}
|
||||
Reference in new issue
Block a user