为Redux切片配置私有Axios实例遇鉴权Token获取问题求助

核心问题分析 #

当前代码存在两个关键错误：

1. 在普通模块privateInstance.ts中调用React Hooks（useRefreshToken），违反Hooks只能在组件/自定义Hooks中使用的规则。
2. 模块初始化时一次性调用store.getState()获取token，仅能拿到初始状态，后续token更新后无法同步。

方案1：拦截器实时获取最新Token（推荐） #

修改Axios拦截器逻辑，每次请求时从Redux Store实时拉取最新token，同时重构refresh token逻辑为普通函数（避免Hooks依赖）。

1. 修正privateInstance.ts

import axios from 'axios';
// 导入你的Redux Store实例
import store from './path-to-your-store';
import { refreshToken } from './useRefreshToken';

export const privateInstance = axios.create({
    baseURL: 'http://localhost:5000',
    headers: { 'Content-Type': 'application/json' },
    withCredentials: true
});

// 请求拦截器：每次请求实时获取最新token
privateInstance.interceptors.request.use(
    async config => {
        const accessToken = store.getState().auth.userContext.accessToken;
        // 仅在未手动设置Authorization时自动添加
        if (!config.headers['Authorization'] && accessToken) {
            config.headers['Authorization'] = `Bearer ${accessToken}`;
        }
        // 补充默认header，不覆盖已有配置
        config.headers['Accept'] = config.headers['Accept'] || 'application/json';
        config.headers['Content-Type'] = config.headers['Content-Type'] || 'application/x-www-form-urlencoded';
        return config;
    },
    error => Promise.reject(error)
);

// 响应拦截器：处理403时刷新token并重试请求
privateInstance.interceptors.response.use(
    response => response,
    async error => {
        const originalRequest = error.config;
        if (error.response?.status === 403 && !originalRequest._retry) {
            originalRequest._retry = true;
            try {
                const newAccessToken = await refreshToken();
                originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
                return privateInstance(originalRequest);
            } catch (refreshError) {
                // 刷新失败：清空Auth状态、跳转登录页等
                store.dispatch(clearAuthState()); // 替换为你的清空Auth action
                return Promise.reject(refreshError);
            }
        }
        return Promise.reject(error);
    }
);

2. 重构useRefreshToken.ts为普通函数

import instance from './path-to-your-public-axios-instance';
import store from './path-to-your-store';
// 导入你的更新token action
import { setAccessToken } from './authSlice';

export const refreshToken = async () => {
    try {
        const res = await instance({
            url: '/auth/refresh',
            method: 'GET'
        });
        // 刷新成功后更新Redux中的token
        store.dispatch(setAccessToken(res.data.accessToken));
        return res.data.accessToken;
    } catch (e: any) {
        console.log(e);
        throw e;
    }
};

3. 异步Thunk简化使用

无需手动添加Authorization header，拦截器会自动处理：

export const addToToDoListAsync = createAsyncThunk(
    "todoList/addToToDoListAsync",
    async (todoObject: ToDoObject) => {
        try {
            const res = await privateInstance({
                url: '/todoList',
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                data: todoObject // Axios自动序列化JSON，无需手动stringify
            });
            return res.data;
        } catch (e: any) {
            console.log(e.response.data.error);
            return e;
        }
    }
);

方案2：在AsyncThunk中手动获取Token #

若不想让Axios实例依赖Redux Store，可在每个异步Thunk中通过thunkAPI.getState()获取最新token：

export const addToToDoListAsync = createAsyncThunk(
    "todoList/addToToDoListAsync",
    async (todoObject: ToDoObject, { getState }) => {
        try {
            const state = getState() as RootState; // 替换为你的RootState类型
            const accessToken = state.auth.userContext.accessToken;
            const res = await privateInstance({
                url: '/todoList',
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${accessToken}`
                },
                data: todoObject
            });
            return res.data;
        } catch (e: any) {
            console.log(e.response.data.error);
            return e;
        }
    }
);

此方案无需修改Axios拦截器，但需在每个Thunk中重复编写token获取逻辑，适合请求量较少的场景。

注意事项 #

• 确保Redux Store实例在导入到privateInstance.ts前已完成初始化，避免循环导入问题。
• 刷新token后必须同步更新Redux状态，确保后续请求能拿到最新token。

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