React中登录后不刷新页面，Axios实例Bearer token未更新问题

当前你的Axios实例在模块首次加载时就读取了sessionStorage里的token并设置到headers中。登录前token为空，登录成功后虽然把token存进了sessionStorage，但已经创建好的Axios实例的headers不会自动更新——因为模块只加载一次，初始化代码不会重新执行。而刷新页面时，模块重新加载，此时token已经存在，headers能正确带上，所以请求正常。

解决办法 #

• 方案一：用Axios请求拦截器动态设置token
  每次发起请求前，都从sessionStorage获取最新的token并设置到请求头，不管登录后还是页面刷新，都能保证token是最新的。修改后的代码如下：

  import axios from "axios";
  
  const AxiosInstance = axios.create({
    baseURL: "https://myurl.com/backend/api/",
    timeout: 5000,
  });
  
  // 添加请求拦截器
  AxiosInstance.interceptors.request.use(
    (config) => {
      const token = JSON.parse(window.sessionStorage.getItem("token"));
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );
  
  export default AxiosInstance;
  

• 方案二：登录成功后手动更新Axios实例的默认headers
  要是不想用拦截器，可以在登录成功、存入token之后，手动修改Axios实例的默认headers：

  // 登录成功后的代码示例
  const token = '获取到的登录token';
  window.sessionStorage.setItem("token", JSON.stringify(token));
  // 更新Axios实例的默认headers
  AxiosInstance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  

  不过这种方式不如拦截器可靠，比如页面刷新后还得重新设置，而拦截器能自动处理这类场景。

另外要注意：当token过期或者用户退出登录时，记得清除sessionStorage里的token，同时清空Axios实例的Authorization头，避免无效token继续被携带。

内容的提问来源于stack exchange，提问作者Shariq Shahid