src/presentation/components/Protected.tsx - gitverse - tm-project/rbac-react-system

src/presentation/components/Protected.tsx
94 строки3 KB
Artem
chore: release v1.0.4
30 ноя 2025, 22:51
30 ноя 2025, 22:51f6f509c
/**
 * rbac-react-system v1.0.4
 * Copyright (c) 2025 TM Project
 * Licensed under the MIT License
 */

import { ReactElement, ReactNode } from 'react'
import { useAccess } from '../hooks'
import { useRbacContext } from '../context'

/**
 * Пропсы компонента Protected
 */
export interface ProtectedProps {
  /**
   * Название ресурса, к которому проверяется доступ
   */
  resource: string

  /**
   * Действие, для которого проверяется доступ
   */
  action: string

  /**
   * Контент, который будет отображаться при наличии доступа
   */
  children: ReactNode

  /**
   * Контент, который будет отображаться при отсутствии доступа
   * Если не указан, будет отображаться null
   */
  fallback?: ReactElement | null

  /**
   * Контент, который будет отображаться во время проверки прав
   * Если не указан, будет отображаться null
   */
  loading?: ReactElement | null
}

/**
 * Компонент для условного рендеринга на основе прав доступа
 * Отображает дочерние элементы, если у пользователя есть доступ к указанному ресурсу и действию,
 * в противном случае — отображает fallback-компонент.
 * @example
 * ```tsx
 * <Protected resource="users" action="write">
 *   <button>Редактировать пользователя</button>
 * </Protected>
 *
 * // С fallback-контентом
 * <Protected
 *   resource="posts"
 *   action="delete"
 *   fallback={<div>У вас нет прав на удаление постов</div>}
 * >
 *   <button>Удалить пост</button>
 * </Protected>
 *
 * // С состоянием загрузки
 * <Protected
 *   resource="settings"
 *   action="read"
 *   loading={<div>Проверка прав...</div>}
 * >
 *   <SettingsPanel />
 * </Protected>
 * ```
 */
export function Protected({
  resource,
  action,
  children,
  fallback = null,
  loading = null,
}: ProtectedProps): ReactElement | null {
  const { isLoading } = useRbacContext()
  const hasAccess = useAccess(resource, action)

  // Показываем состояние загрузки во время проверки прав
  if (isLoading) {
    return loading
  }

  // Показываем fallback, если доступ запрещён
  if (!hasAccess) {
    return fallback
  }

  // Рендерим дочерние элементы, если доступ разрешён
  return <>{children}</>
}