docs/examples/1-basic-setup.tsx - gitverse - tm-project/rbac-react-system

docs/examples/1-basic-setup.tsx
163 строки4 KB
Artem
add testcases
30 ноя 2025, 17:50
30 ноя 2025, 17:500e29268
/**
 * Базовая настройка RBAC системы
 *
 * Этот пример демонстрирует:
 * - Создание RBAC провайдера с конфигурацией
 * - Использование mock репозиториев для разработки
 * - Установка начального пользователя
 */

import React from 'react'
import {
  RbacProvider,
  MockUserRepository,
  MockPermissionRepository,
  MockRoleRepository,
  User,
  Role,
  Permission,
  useRbac,
} from 'rbac-react-system'

// Создаем mock репозитории с данными

// Определяем пермишены
const permissions: Permission[] = [
  { id: 'users-read', resource: 'users', action: 'read' },
  { id: 'users-write', resource: 'users', action: 'write' },
  { id: 'users-delete', resource: 'users', action: 'delete' },
  { id: 'posts-read', resource: 'posts', action: 'read' },
  { id: 'posts-write', resource: 'posts', action: 'write' },
  { id: 'admin-access', resource: 'admin', action: 'access' },
]

// Определяем роли
const roles: Role[] = [
  {
    id: 'user',
    name: 'User',
    permissions: [permissions[3]], // posts:read
  },
  {
    id: 'editor',
    name: 'Editor',
    permissions: [permissions[3], permissions[4]], // posts:read, posts:write
    inheritedRoles: ['user'],
  },
  {
    id: 'admin',
    name: 'Administrator',
    permissions: [
      permissions[0], // users:read
      permissions[1], // users:write
      permissions[2], // users:delete
      permissions[5], // admin:access
    ],
    inheritedRoles: ['editor'],
  },
]

// Определяем пользователей
const users: User[] = [
  {
    id: 'user-1',
    roles: ['user'],
    permissions: [],
    attributes: {
      name: 'John Doe',
      email: 'john@example.com',
      department: 'Sales',
    },
  },
  {
    id: 'user-2',
    roles: ['editor'],
    permissions: [],
    attributes: {
      name: 'Jane Smith',
      email: 'jane@example.com',
      department: 'Content',
    },
  },
  {
    id: 'user-3',
    roles: ['admin'],
    permissions: [],
    attributes: {
      name: 'Admin User',
      email: 'admin@example.com',
      department: 'Management',
    },
  },
]

// Инициализируем mock репозитории
const userRepository = new MockUserRepository(users)
const permissionRepository = new MockPermissionRepository(permissions)
const roleRepository = new MockRoleRepository(roles)

// Компонент приложения
export function App() {
  return (
    <RbacProvider
      config={{
        userRepository,
        permissionRepository,
        roleRepository,
        initialUserId: 'user-1', // Загружаем пользователя при инициализации
      }}
    >
      <AppContent />
    </RbacProvider>
  )
}

// Основной контент приложения
function AppContent() {
  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>RBAC System - Basic Setup Example</h1>
      <p>
        Приложение инициализировано с пользователем "user-1" (роль: user)
      </p>
      <p>
        Попробуйте изменить initialUserId на 'user-2' или 'user-3' для просмотра
        различных прав доступа.
      </p>
      <UserInfo />
    </div>
  )
}

// Компонент отображения информации о пользователе
function UserInfo() {
  const { user, isLoading } = useRbac()

  if (isLoading) {
    return <div>Загрузка данных пользователя...</div>
  }

  if (!user) {
    return <div>Пользователь не авторизован</div>
  }

  return (
    <div style={{ marginTop: '20px', padding: '10px', border: '1px solid #ccc' }}>
      <h2>Текущий пользователь:</h2>
      <p>
        <strong>ID:</strong> {user.id}
      </p>
      <p>
        <strong>Имя:</strong> {user.attributes.name}
      </p>
      <p>
        <strong>Email:</strong> {user.attributes.email}
      </p>
      <p>
        <strong>Роли:</strong> {user.roles.join(', ') || 'нет'}
      </p>
    </div>
  )
}

export default App