Токен Axios Instance Bearer не обновляется после входа в систему без перезагрузки - React

Ваш token инициализируется onload, поэтому вам нужно вызывать токен в config.headers["Authorization"] при каждом запросе через interceptor, поэтому вам не нужно перезагружать страницу.

Перехватчик: Перехватчики Axios — это функции, которые вызываются перед отправкой запроса и после получения ответа.

import axios from "axios";

let AxiosInstance = axios.create({
  baseURL: "https://myurl.com/backend/api/",
  timeout: 5000,
});

AxiosInstance.interceptors.request.use(function (config) {
  let token = JSON.parse(window.sessionStorage.getItem("sessionData"));
  config.headers["Authorization"] = "Bearer " + token;
  return config;
});

export default AxiosInstance;

ОБНОВЛЕНИЕ: Здесь вы можете узнать больше о перехватчиках Axios

Я предполагаю, что это потому, что вы создаете экземпляр axios вне любого жизненного цикла React.

когда вы запускаете свое приложение и входите в экран входа в систему, оно создает экземпляр Axios

import axios from "axios";

let token = JSON.parse(window.sessionStorage.getItem("token"));

let AxiosInstance = axios.create({
  baseURL: "https://myurl.com/backend/api/",
  timeout: 5000,
  headers: { Authorization: "Bearer " + token }, // on the first go token is null
});

export default AxiosInstance;

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

Есть пара вещей, которые вы можете сделать, но проще всего использовать перехватчики Axios.

  AxiosInstace.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token');
    config.headers.Authorization =  token ? `Bearer ${token}` : '';
    return config;
  });

Таким образом, каждый раз, когда вы делаете запрос, ваши заголовки будут обновляться (не уверен, что это лучший подход, но он работает).