Как работает автоматический refresh токена через interceptor?

Как работает автоматический refresh токена через interceptor

Interceptor (перехватчик) — это функция, которая перехватывает HTTP-запросы или ответы до того, как они будут обработаны приложением. В контексте обновления токенов interceptor используется для автоматического обнаружения и обработки ошибок авторизации (обычно 401 Unauthorized). Когда сервер возвращает такую ошибку, interceptor не передает её сразу в приложение, а сначала пытается обновить access token с помощью refresh token.

Процесс работы

• При каждом запросе interceptor добавляет текущий access token в заголовок Authorization.
• Если сервер возвращает 401, interceptor перехватывает ответ и проверяет, не был ли уже отправлен запрос на обновление токена.
• Если запрос на обновление ещё не отправлен, interceptor отправляет POST-запрос на специальный endpoint (например, /auth/refresh) с refresh token.
• После успешного ответа новый access token сохраняется (например, в localStorage или памяти), и все ожидающие запросы повторяются с новым токеном.
• Если обновление не удалось (например, refresh token истек), пользователь перенаправляется на страницу входа.

Пример кода на JavaScript с использованием Axios

import axios from 'axios';

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

let isRefreshing = false;
let failedQueue = [];

const processQueue = (error, token = null) => {
  failedQueue.forEach(prom => {
    if (error) prom.reject(error);
    else prom.resolve(token);
  });
  failedQueue = [];
};

api.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    if (error.response?.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        }).then(token => {
          originalRequest.headers['Authorization'] = 'Bearer ' + token;
          return api(originalRequest);
        });
      }
      originalRequest._retry = true;
      isRefreshing = true;
      try {
        const { data } = await axios.post('/auth/refresh', { refreshToken: localStorage.getItem('refreshToken') });
        const newToken = data.accessToken;
        localStorage.setItem('accessToken', newToken);
        processQueue(null, newToken);
        originalRequest.headers['Authorization'] = 'Bearer ' + newToken;
        return api(originalRequest);
      } catch (refreshError) {
        processQueue(refreshError, null);
        // Перенаправление на логин
        window.location.href = '/login';
        return Promise.reject(refreshError);
      } finally {
        isRefreshing = false;
      }
    }
    return Promise.reject(error);
  }
);

Вывод

Автоматический refresh токена через interceptor — это стандартный подход для поддержания сессии в SPA и мобильных приложениях. Он улучшает пользовательский опыт, скрывая процесс обновления токенов, и обеспечивает безопасность за счет использования короткоживущих access токенов и долгоживущих refresh токенов. Применяется в большинстве современных веб-приложений с JWT-аутентификацией.