Как изменить экземпляр axios после его экспорта в ReactJS?

Question

Я использую:

axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

, чтобы установить заголовок после того, как пользователь сделает вход в приложение, но при обновлении страницы эта конфигурация будет удалена.

Я хотел бы установить эту конфигурацию длявсе запросы от axios, когда пользователь делает логин.

Я получил сделать эту настройку вручную, поместив эту строку кода перед экспортом экземпляра axios.

Теперь мне нужно установить эту конфигурациюкогда пользователь делает логин.Как я могу это сделать?

Answer 1

Возможно, вы захотите написать модуль промежуточного программного обеспечения, чтобы получить / установить токен в localStorage и применить его к вашему экземпляру Axios.В прошлом, когда я использовал Axios, я обычно делал это так:

import axios from 'axios';
import { API_URL } from '../constants/api';

const API = axios.create({
  baseURL: `${API_URL}`,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

API.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('jwt');

    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    } else {
      delete API.defaults.headers.common.Authorization;
    }
    return config;
  },

  error => Promise.reject(error)
);

export default API;

Вам нужно будет создать функции для получения / установки JWT в localStorage, но если вы это сделаете, это должноработать для вас.Это приведет к извлечению JWT из localStorage перед выполнением каждого запроса, поэтому он не будет разрываться, даже если страница обновляется, пока у пользователя есть действительный JWT в localStorage.