Как удалить пользователя?

Удаление пользователя в веб-приложении: полное руководство

Удаление пользователя — это критически важная операция, которая требует комплексного подхода на frontend, тесного взаимодействия с backend API и соблюдения ключевых принципов UX/UI и безопасности. Реализация зависит от архитектуры приложения, выбранного стека технологий и бизнес-требований.

1. Архитектура взаимодействия Frontend и Backend

Типичный поток удаления пользователя выглядит так:

1. Инициация на клиенте: Пользователь выполняет действие (клик по кнопке, выбор из меню).
2. Подтверждение: Frontend запрашивает подтверждение деструктивного действия.
3. HTTP-запрос: Клиент отправляет запрос на защищённый endpoint API.
4. Обработка на сервере: Backend валидирует права, выполняет операцию в БД (мягкое или жёсткое удаление).
5. Ответ API: Сервер возвращает статус операции.
6. Обработка ответа на клиенте: Frontend обновляет интерфейс, уведомляет пользователя и перенаправляет при необходимости.

2. Frontend-реализация на примере React с TypeScript

Рассмотрим реализацию в современном React-приложении с использованием хуков и состояния.

import React, { useState } from 'react';
import { userApiService } from '../services/api';
import { useAuth } from '../contexts/AuthContext';
import { ConfirmationModal } from './ui/ConfirmationModal';
import { showToast } from '../utils/notifications';

interface DeleteUserButtonProps {
  userId: string;
  onUserDeleted?: () => void;
}

export const DeleteUserButton: React.FC<DeleteUserButtonProps> = ({ 
  userId, 
  onUserDeleted 
}) => {
  const [isLoading, setIsLoading] = useState(false);
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const { logout } = useAuth();

  const handleDeleteClick = () => {
    // Всегда запрашиваем подтверждение!
    setShowConfirmModal(true);
  };

  const handleConfirmDelete = async () => {
    setIsLoading(true);
    try {
      // Отправляем DELETE-запрос на API
      await userApiService.deleteUser(userId);
      
      // Успешное удаление
      showToast.success('Пользователь успешно удалён');
      
      // Если удаляем текущего пользователя - выполняем logout
      const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
      if (currentUser.id === userId) {
        await logout();
        window.location.href = '/login';
      } else {
        // Иначе вызываем callback для обновления списка
        onUserDeleted?.();
      }
    } catch (error) {
      // Обработка ошибок
      console.error('Ошибка при удалении пользователя:', error);
      showToast.error(
        error.response?.data?.message || 'Не удалось удалить пользователя'
      );
    } finally {
      setIsLoading(false);
      setShowConfirmModal(false);
    }
  };

  return (
    <>
      <button
        onClick={handleDeleteClick}
        disabled={isLoading}
        className="delete-button"
        aria-label="Удалить пользователя"
      >
        {isLoading ? 'Удаление...' : 'Удалить'}
      </button>

      <ConfirmationModal
        isOpen={showConfirmModal}
        onClose={() => setShowConfirmModal(false)}
        onConfirm={handleConfirmDelete}
        title="Подтверждение удаления"
        message="Вы уверены, что хотите удалить этого пользователя? Это действие невозможно отменить."
        confirmText="Удалить"
        cancelText="Отмена"
        variant="danger"
      />
    </>
  );
};

3. Сервис для работы с API (Axios)

// services/api/userApiService.ts
import axios, { AxiosInstance } from 'axios';

class UserApiService {
  private api: AxiosInstance;

  constructor() {
    this.api = axios.create({
      baseURL: process.env.REACT_APP_API_URL,
      timeout: 10000,
    });

    // Интерцептор для добавления токена авторизации
    this.api.interceptors.request.use((config) => {
      const token = localStorage.getItem('accessToken');
      if (token && config.headers) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    });
  }

  async deleteUser(userId: string): Promise<void> {
    // Используем HTTP метод DELETE
    const response = await this.api.delete(`/users/${userId}`);
    return response.data;
  }

  // Альтернативный подход с передачей данных в теле запроса
  async deleteUserWithReason(userId: string, reason: string): Promise<void> {
    const response = await this.api.delete(`/users/${userId}`, {
      data: { reason } // Для DELETE с body
    });
    return response.data;
  }
}

export const userApiService = new UserApiService();

4. Ключевые аспекты и лучшие практики

Безопасность и авторизация

• Все запросы на удаление должны проверять JWT-токен или сессию
• Реализуйте проверку прав: может ли текущий пользователь удалять других?
• Используйте ролевую модель (RBAC) для управления доступом

UX-принципы для деструктивных действий

• Обязательное подтверждение через модальное окно
• Чёткая формулировка последствий удаления
• Визуальное выделение опасных кнопок (красный цвет)
• Защита от случайных кликов (двойное подтверждение для админов)
• Индикация загрузки во время выполнения запроса

Обработка ошибок на Frontend

// Расширенная обработка ошибок
const handleDelete = async () => {
  try {
    await deleteUser(userId);
  } catch (error) {
    switch (error.response?.status) {
      case 401:
        showToast.error('Требуется авторизация');
        redirectToLogin();
        break;
      case 403:
        showToast.error('Недостаточно прав для удаления');
        break;
      case 404:
        showToast.error('Пользователь не найден');
        onUserDeleted?.(); // Обновляем список
        break;
      case 423:
        showToast.error('Пользователь заблокирован, удаление невозможно');
        break;
      default:
        showToast.error('Произошла ошибка при удалении');
        logErrorToService(error);
    }
  }
};

Состояние приложения после удаления

• Удаление другого пользователя: обновление списка пользователей без перезагрузки страницы
• Самоудаление: очистка данных аутентификации, редирект на главную или страницу входа
• Кеширование: инвалидация кеша в состоянии приложения (например, в Redux или React Query)

5. Альтернативные подходы

Мягкое удаление (soft delete)

Чаще используется в реальных приложениях:

// Фронтенд отправляет запрос на деактивацию
await api.patch(`/users/${userId}`, { 
  status: 'deactivated',
  deactivatedAt: new Date().toISOString()
});

Удаление через GraphQL

# Запрос GraphQL
mutation DeleteUser($userId: ID!) {
  deleteUser(id: $userId) {
    success
    message
    deletedUserId
  }
}

6. Тестирование

Не забудьте покрыть функциональность тестами:

// Пример теста с Jest и React Testing Library
test('should delete user after confirmation', async () => {
  const mockOnDelete = jest.fn();
  render(<DeleteUserButton userId="123" onUserDeleted={mockOnDelete} />);
  
  fireEvent.click(screen.getByText('Удалить'));
  fireEvent.click(screen.getByText('Подтвердить'));
  
  await waitFor(() => {
    expect(mockOnDelete).toHaveBeenCalled();
  });
});

Заключение

Удаление пользователя — это не просто вызов API метода. Это комплексный процесс, затрагивающий безопасность, удобство использования, обратную связь и управление состоянием приложения. Всегда используйте подтверждение, обрабатывайте все возможные ошибки, предусматривайте различные сценарии (самоудаление, недостаток прав, проблемы с сетью) и следите за целостностью состояния приложения после выполнения операции.

В продакшн-приложениях также рекомендуется реализовать аудит действий (логирование кто, когда и кого удалил) и восстановление данных на случай ошибочного удаления, хотя эти функции обычно реализуются на backend.