Создание Axios interceptors в React и NextJs

Здравствуйте и добро пожаловать в эту статью о создании перехватчика Axios в React и Next.js. В этой статье мы рассмотрим, как настроить и использовать Axios, а также как создать перехватчик, который может автоматически обновлять токены.

Шаг 1: Инициализация проекта

Сначала нам нужно инициализировать проект с помощью следующей команды: yarn create react-app <имя приложения> или npx create-react-app <имя приложения>. Эта команда создаст новое приложение React с выбранным вами именем.

Шаг 2: Создание файла конфигурации Axios

Теперь, когда у нас есть новое приложение React, мы можем создать службу каталогов и создать внутри нее файл с именем axiosConfig.ts. Вот код, который нужно поместить в этот файл:

import axios from 'axios';
import { getToken, setToken } from '../../../utils/localStorage';
import { redirect } from "react-router-dom";
import { getRefreshToken } from '../login';

const statusCode = [401,402,403]
const HttpAuthInstance = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,
    headers: {
        "Authorization": "Bearer" + " " + getToken("token").accessToken
    }
})

HttpAuthInstance.interceptors.response.use((response) => {
    return response;
}, (error) => {
    if (statusCode.indexOf(error?.response?.status) !== -1) {
        getRefreshToken(getToken("token")?.refreshToken).then(res=>setToken("token",res?.data))
    }
})

export default HttpAuthInstance;

Этот код устанавливает экземпляр Axios, который включает базовый URL и заголовки с маркером авторизации. Он также устанавливает перехватчик, который проверяет наличие определенных кодов состояния ошибки и при необходимости обновляет маркер.

Шаг 3: Использование файла конфигурации Axios

Чтобы использовать экземпляр Axios в своем приложении, просто импортируйте его в файл, в котором необходимо выполнять вызовы API. Вот пример того, как это сделать:

import HttpAuthInstance from './service/axiosConfig';

HttpAuthInstance.get('/api/users').then(response => {
    console.log(response.data);
});

В этом примере мы делаем GET-запрос к конечной точке /api/users и записываем данные ответа в консоль.

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

Счастливого кодинга!