Как отправить токен обновления в Axios Interceptor: пошаговое руководство

Чтобы отправить токен обновления в перехватчике Axios, вы можете выполнить следующие действия:

  1. Настройте перехватчик Axios. Перехватчики позволяют перехватывать исходящие запросы или входящие ответы до того, как они будут обработаны приложением. В данном случае мы хотим перехватывать исходящие запросы и включать токен обновления.

  2. Создайте функцию, которая обрабатывает логику обновления токена. Эта функция будет отвечать за получение нового токена доступа с использованием токена обновления. Вы можете использовать библиотеку, например axiosили fetch, чтобы отправить запрос на ваш сервер и получить новый токен доступа.

  3. Измените перехватчик Axios для обработки обновления токена. Внутри перехватчика вы можете проверить, возвращает ли запрос код состояния 401 (неавторизованный). Если это так, вызовите функцию, созданную на шаге 2, чтобы обновить токен доступа, а затем повторите исходный запрос с новым токеном.

Вот пример реализации с использованием Axios:

import axios from 'axios';
const api = axios.create({
  baseURL: 'https://api.example.com',
});
const refreshToken = async () => {
  // Logic to refresh the token and obtain a new access token
  // This can be done using an API call to your server
  const response = await axios.post('/refresh-token', {
    // Include any necessary data for refreshing the token
  });
  const newAccessToken = response.data.accessToken;
  // Save the new access token to your storage (e.g., localStorage)
  // ...
  // Return the new access token
  return newAccessToken;
};
api.interceptors.request.use(
  async (config) => {
    // Add the access token to the request headers
    const accessToken = localStorage.getItem('accessToken');
    config.headers.Authorization = `Bearer ${accessToken}`;
    return config;
  },
  async (error) => {
    // Handle request error
    return Promise.reject(error);
  }
);
api.interceptors.response.use(
  async (response) => {
    // Return the response if it's successful
    return response;
  },
  async (error) => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const newAccessToken = await refreshToken();
      // Retry the original request with the new access token
      originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
      return api(originalRequest);
    }
// Return any other error
    return Promise.reject(error);
  }
);

Предполагается, что у вас есть конечная точка /refresh-tokenна вашем сервере, которая обрабатывает обновление токена. Вам нужно будет настроить его в соответствии с вашей конкретной реализацией.