Как реализовать единообразную обработку всех запросов (например, проверку истечения токена через interceptors в Axios)?

Введение в перехватчики Axios

Axios предоставляет механизм перехватчиков (interceptors), который позволяет перехватывать и изменять HTTP-запросы до их отправки и ответы до их обработки в коде приложения. Это мощный инструмент для реализации сквозной функциональности, такой как добавление заголовков авторизации, логирование, обработка ошибок и автоматическое обновление токенов.

Проблема истечения токена

В современных приложениях часто используются JWT-токены с ограниченным сроком действия. Когда токен истекает, сервер возвращает статус 401. Без перехватчиков разработчику пришлось бы в каждом месте вызова API проверять статус ответа, обрабатывать обновление токена и повторять запрос. Это приводит к дублированию кода и ошибкам.

Решение с помощью перехватчиков

Перехватчик ответа позволяет централизованно обрабатывать ошибку 401. При получении такого ответа мы можем попытаться обновить токен с помощью специального запроса к серверу, а затем повторить исходный запрос с новым токеном. Если обновление не удалось, можно перенаправить пользователя на страницу входа.

import axios from 'axios';

const api = axios.create({ baseURL: '/api' });

// Перехватчик запроса: добавляем токен к каждому запросу
api.interceptors.request.use(config => {
  const token = localStorage.getItem('accessToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Перехватчик ответа: обрабатываем истечение токена
api.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      try {
        const refreshToken = localStorage.getItem('refreshToken');
        const { data } = await axios.post('/auth/refresh', { refreshToken });
        localStorage.setItem('accessToken', data.accessToken);
        originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
        return api(originalRequest); // повторяем исходный запрос
      } catch (refreshError) {
        // Если обновление не удалось, выходим из системы
        localStorage.clear();
        window.location.href = '/login';
        return Promise.reject(refreshError);
      }
    }
    return Promise.reject(error);
  }
);

export default api;

Ключевые аспекты реализации

• Флаг _retry предотвращает бесконечный цикл повторных запросов при повторной ошибке 401.
• Отдельный экземпляр axios для запроса обновления токена, чтобы избежать рекурсии перехватчиков.
• Централизованное управление токенами и логикой аутентификации в одном месте.

Вывод

Использование перехватчиков Axios для обработки истечения токена — это стандартный и эффективный подход в современных фронтенд-приложениях. Он позволяет поддерживать чистоту кода, уменьшает дублирование и обеспечивает единообразное поведение всех HTTP-запросов. Этот паттерн особенно полезен в крупных проектах с множеством API-вызовов и сложной логикой аутентификации.