Как реализовать axios.interseptors для сохранения и обновления токена?

Для реализации функционала сохранения и обновления токена при использовании библиотеки axios в React Native, мы можем воспользоваться функционалом axios.interceptors.

Axios.interceptors предоставляет возможность перехвата и обработки всех запросов и ответов, которые совершаются с помощью axios. Мы можем использовать это для обновления токена или для сохранения нового токена после успешной аутентификации.

Прежде всего, нам необходимо создать экземпляр axios с нашими базовыми настройками. Для этого мы можем использовать метод create, который предоставляется в axios:

import axios from 'axios';

const instance = axios.create({
  // Здесь вы можете указать свои базовые настройки, такие как базовый URL или хедеры авторизации
});

Далее, чтобы добавить перехватчик (интерсептор), нам нужно вызвать метод interceptors на нашем экземпляре axios. Метод interceptors принимает два параметра - request и response. Мы можем добавить функцию обратного вызова для каждого из этих параметров, которая будет выполняться во время обработки запросов и ответов.

import axios from 'axios';

const instance = axios.create({
  // Здесь вы можете указать свои базовые настройки, такие как базовый URL или хедеры авторизации
});

// Перехват запросов
instance.interceptors.request.use((config) => {
  // Здесь вы можете модифицировать или добавить заголовки запроса, например, передавать токен авторизации

  return config;
}, (error) => {
  return Promise.reject(error);
});

// Перехват ответов
instance.interceptors.response.use((response) => {
  // Здесь вы можете обработать успешный ответ, проверить и сохранить новый или обновленный токен

  return response;
}, (error) => {
  // Здесь вы можете обработать ошибку ответа, например, проверить код состояния ответа или обработать ошибку аутентификации

  return Promise.reject(error);
});

В перехватчиках запросов и ответов, вы можете добавить код для проверки состояния ответа, проверки токена или обновления токена. Например, если у вас есть обновленный токен, вы можете сохранить его в хранилище (например, в AsyncStorage, если вы используете React Native) и использовать его в последующих запросах.

Теперь, когда вы создали экземпляр axios с перехватчиками, вы можете использовать этот экземпляр для выполнения ваших запросов:

instance.get('/api/data')
  .then((response) => {
    // Здесь вы можете обработать успешный ответ
  })
  .catch((error) => {
    // Здесь вы можете обработать ошибку запроса
  });

Таким образом, с помощью перехватчиков axios в React Native вы можете легко реализовать функционал сохранения и обновления токена при взаимодействии с сервером.