Developer
ba33d517c1
后端: - 新增 Role / RolePermission 实体（自动 seed 系统角色） - PermissionService——通过 isAdmin / TenantMember 链路解析用户权限 - @Permission() 装饰器 + PermissionsGuard 守卫 - /api/permissions 和 /api/roles REST API - UserController 内联 role 检查迁移到 @Permission() - PermissionModule 全局注册 前端: - usePermissions hook——获取当前用户权限集 - PermissionGate 组件级门控 - PermissionSettingsView——角色列表+权限矩阵编辑页面 - SettingsView 新增「权限管理」Tab（仅 admin 可见） - 权限预览（26 项，7 分类） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { usePermissions } from '../src/hooks/usePermissions';
|
|
|
|
interface PermissionGateProps {
|
|
/** 需要的权限（OR 关系：有任一即可） */
|
|
permission?: string;
|
|
/** 多个权限 OR 关系 */
|
|
any?: string[];
|
|
/** 多个权限 AND 关系（必须全部拥有） */
|
|
all?: string[];
|
|
/** 加载中时显示的内容（默认不显示） */
|
|
fallback?: React.ReactNode;
|
|
/** 无权限时显示的内容（默认不显示） */
|
|
denied?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* 组件级权限门控
|
|
* 根据用户权限集有条件的渲染子组件
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <PermissionGate permission="user:create">
|
|
* <Button>创建用户</Button>
|
|
* </PermissionGate>
|
|
*
|
|
* <PermissionGate any={['user:edit', 'user:delete']}>
|
|
* <AdminPanel />
|
|
* </PermissionGate>
|
|
* ```
|
|
*/
|
|
export const PermissionGate: React.FC<PermissionGateProps> = ({
|
|
permission,
|
|
any,
|
|
all,
|
|
fallback = null,
|
|
denied = null,
|
|
children,
|
|
}) => {
|
|
const { hasPermission, hasAnyPermission, hasAllPermissions, isLoading } = usePermissions();
|
|
|
|
if (isLoading) {
|
|
return <>{fallback}</>;
|
|
}
|
|
|
|
let granted = false;
|
|
|
|
if (permission) {
|
|
granted = hasPermission(permission);
|
|
} else if (any && any.length > 0) {
|
|
granted = hasAnyPermission(...any);
|
|
} else if (all && all.length > 0) {
|
|
granted = hasAllPermissions(...all);
|
|
} else {
|
|
// 没有指定权限要求 → 放行
|
|
granted = true;
|
|
}
|
|
|
|
return <>{granted ? children : denied}</>;
|
|
};
|