在axios拦截器中访问Redux store配置JWT，导入store报错如何解决？

报错原因 #

你遇到的报错本质是模块循环依赖导致的初始化顺序问题：
大概率是你在编写user切片的异步请求逻辑（比如Redux Thunk）时，导入了API.js导出的axios实例，同时API.js又在文件顶部导入了store.js导出的store对象，形成了store.js -> user.js -> API.js -> store.js的循环依赖链。模块加载时store还没有完成初始化就被API.js引用，就会抛出初始化前无法访问对应变量的错误。

解决方案 #

以下两种方案都可以直接解决问题：

• 方案1：封装拦截器注册逻辑，初始化store后再注册
  修改API.js，删除顶部的store导入，把拦截器注册逻辑封装为可接收store参数的函数：

import axios from "axios";

export const SERVERURL = "some url";

axios.defaults.withCredentials = true;
const API = axios.create({ baseURL: "some url" });

// 导出拦截器注册方法
export const setupInterceptors = (store) => {
  API.interceptors.request.use(req => {
    // 此处可以正常访问store
    const token = store.getState().user?.token;
    if (token) {
      req.headers.Authorization = `Bearer ${token}`;
    }
    return req;
  });
};

export default API;

修改index.js，在store初始化完成后调用拦截器注册方法：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import { store } from "./redux/store";
import { Provider } from "react-redux";
// 导入拦截器注册方法，替换为你实际的API.js路径
import { setupInterceptors } from './API';

// store初始化完成后注册拦截器
setupInterceptors(store);

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

• 方案2：拦截器内动态导入store
  如果不想调整现有代码结构，可以直接修改API.js的拦截器逻辑，删除顶部的store导入，在拦截器运行时再动态引入store：

import axios from "axios";

export const SERVERURL = "some url";

axios.defaults.withCredentials = true;
const API = axios.create({ baseURL: "some url" });

API.interceptors.request.use(req => {
  // 运行时动态导入，此时store已经完成初始化
  const { store } = require('../redux/store');
  const token = store.getState().user?.token;
  if (token) {
    req.headers.Authorization = `Bearer ${token}`;
  }
  return req;
});

export default API;

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