PermissionWrapper.tsx 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. import React from 'react';
  2. import { hasPermission, hasAnyPermission, hasAllPermissions, hasRole } from '../utils/permission';
  3. interface PermissionWrapperProps {
  4. children: React.ReactNode;
  5. permission?: string;
  6. permissions?: string[];
  7. requireAll?: boolean;
  8. role?: string;
  9. fallback?: React.ReactNode;
  10. }
  11. /**
  12. * 权限包装组件
  13. * 根据权限控制子组件的显示
  14. */
  15. export default function PermissionWrapper({
  16. children,
  17. permission,
  18. permissions,
  19. requireAll = false,
  20. role,
  21. fallback = null,
  22. }: PermissionWrapperProps) {
  23. // 检查角色权限
  24. if (role && !hasRole(role)) {
  25. return <>{fallback}</>;
  26. }
  27. // 检查单个权限
  28. if (permission && !hasPermission(permission)) {
  29. return <>{fallback}</>;
  30. }
  31. // 检查多个权限
  32. if (permissions && permissions.length > 0) {
  33. const hasAccess = requireAll
  34. ? hasAllPermissions(permissions)
  35. : hasAnyPermission(permissions);
  36. if (!hasAccess) {
  37. return <>{fallback}</>;
  38. }
  39. }
  40. // 如果没有指定权限检查,默认显示
  41. return <>{children}</>;
  42. }