在ReactJS中导出axios实例后如何修改它？

我在用：

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

在用户登录应用程序后设置标题，但刷新页面时此配置将被删除。

当用户登录时，我想为来自 axios 的所有请求设置此配置。

我手动设置此配置，将这行代码放在导出 axios 实例之前。

现在，我需要在用户登录时设置此配置。我怎样才能做到这一点？

您可能想要编写一个中间件模块来获取/设置令牌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;

您需要创建函数来获取/设置 JWTlocalStorage，但如果你这样做，这应该对你有用。这将从中获取 JWTlocalStorage在发出每个请求之前，因此只要用户具有有效的 JWT，即使刷新页面也不会中断localStorage.