自动重载导入 React答案

【问题标题】：Automatic reload import React自动重载导入 React
【发布时间】：2021-03-27 22:36:01
【问题描述】：

目前，我将调用 API 的 axios 设置为：

export const API_LOCAL = axios.create({
    baseURL: process.env.REACT_APP_BASEURL,
    headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    timeout: 30000,
});

当我开始导入和使用此导出为 API_LOCAL 的文件时，我没有使用“授权”，localStorage.getItem('token') 为空。然后我会获取一些数据并设置回 localStorage.setItem('token','SOME_SAMPLE_TEXT')。

之后，当在另一个使用 API_LOCAL 的调用中，我认为它被缓存了，因为带有 localStorage.getItem('token') 的 API_LOCAL 始终为空。

我可以设置动态重新加载导入文件以获取最新数据吗？感谢您的任何指导。

【问题讨论】：

标签： javascript reactjs dynamic import

【解决方案1】：

处理 Bearer 令牌的最佳方式是通过拦截器。你可以做类似的事情

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if ( token != null ) {
    config.headers.Authorization = `Bearer ${token}`;
  }
}

这样每个 axios 请求都将与您的身份验证令牌一起发送

【讨论】：