React集成Axios实例并实现Token自动刷新的方案咨询

针对你的场景，有几个优雅的方案可以解决Axios拦截器调用useAuth()中refreshToken()的问题：

方案一：在AuthProvider中注入刷新方法到Axios实例 #

既然AuthProvider是所有页面的父组件，可以在AuthProvider初始化时，把refreshToken方法挂载到Axios实例上，让拦截器直接调用。

步骤： #

1. 修改Axios实例文件，预留方法注入入口：

// apiClient.js
import axios from 'axios';

const apiClient = axios.create({
    baseURL: API_BASE_URL,
    headers: {
        accept: 'application/json'
    }
});

// 预留刷新方法的容器
apiClient.refreshToken = null;

apiClient.interceptors.response.use(
    (response) => response,
    async (error) => {
        const originalRequest = error.config;
        if (error.response.status === 403 && !originalRequest.retry) {
            originalRequest.retry = true;
            // 调用注入的刷新方法
            if (!apiClient.refreshToken) throw new Error("刷新Token方法未注入");
            const access_token = await apiClient.refreshToken();
            // 更新请求头的Token（根据你的认证方式调整）
            originalRequest.headers.Authorization = `Bearer ${access_token}`;
            return apiClient(originalRequest);
        }
        throw error;
    }
);

export default apiClient;

2. 在AuthProvider组件中注入刷新方法：

// AuthProvider.jsx
import { createContext, useContext, useMemo, useEffect } from 'react';
import apiClient from './apiClient';

const AuthContext = createContext();

export function AuthProvider({ children }) {
    // 你的AWS Cognito刷新Token逻辑
    const refreshToken = async () => {
        const newToken = await yourCognitoRefreshImplementation();
        // 同步更新AuthContext中的Token状态（如果需要）
        return newToken;
    };

    // 组件挂载时注入方法，卸载时清空
    useEffect(() => {
        apiClient.refreshToken = refreshToken;
        return () => {
            apiClient.refreshToken = null;
        };
    }, [refreshToken]);

    const authValue = useMemo(() => ({
        refreshToken,
        // 其他Auth相关方法和状态
    }), [refreshToken]);

    return (
        <AuthContext.Provider value={authValue}>
            {children}
        </AuthContext.Provider>
    );
}

export const useAuth = () => useContext(AuthContext);

该方案无需改动现有组件结构，利用AuthProvider的生命周期完成方法注入，逻辑简洁。

方案二：将刷新逻辑移到Redux Thunk中 #

既然你已经用Redux管理状态，可以把refreshToken封装成Redux Thunk Action，让Axios拦截器直接调用store的dispatch方法。

步骤： #

1. 创建认证相关的Redux Slice：

// authSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { yourCognitoRefreshImplementation } from './cognitoUtils';

// 定义刷新Token的异步Action
export const refreshToken = createAsyncThunk(
    'auth/refreshToken',
    async (_, { rejectWithValue }) => {
        try {
            const newToken = await yourCognitoRefreshImplementation();
            return newToken;
        } catch (err) {
            return rejectWithValue(err.message);
        }
    }
);

const authSlice = createSlice({
    name: 'auth',
    initialState: {
        accessToken: null,
        // 其他认证状态
    },
    reducers: {},
    extraReducers: (builder) => {
        builder
            .addCase(refreshToken.fulfilled, (state, action) => {
                state.accessToken = action.payload;
            });
    }
});

export default authSlice.reducer;

2. 修改Axios实例调用Redux Action：

// apiClient.js
import axios from 'axios';
import store from './store'; // 导入你的Redux Store
import { refreshToken } from './authSlice';

const apiClient = axios.create({
    baseURL: API_BASE_URL,
    headers: {
        accept: 'application/json'
    }
});

apiClient.interceptors.response.use(
    (response) => response,
    async (error) => {
        const originalRequest = error.config;
        if (error.response.status === 403 && !originalRequest.retry) {
            originalRequest.retry = true;
            // 调用Redux刷新Action
            const result = await store.dispatch(refreshToken());
            if (refreshToken.fulfilled.match(result)) {
                const access_token = result.payload;
                originalRequest.headers.Authorization = `Bearer ${access_token}`;
                return apiClient(originalRequest);
            } else {
                // 刷新失败，可添加跳转到登录页等逻辑
                throw error;
            }
        }
        throw error;
    }
);

export default apiClient;

该方案将认证逻辑统一到Redux中，适合重度依赖Redux的项目，无需依赖React上下文。

方案三：抽离独立的Auth工具类 #

把AWS Cognito的认证逻辑从useAuth Hook中抽离到独立工具类，让Axios和React组件都能调用。

步骤： #

1. 创建单例模式的Auth工具类：

// authUtils.js
import { CognitoAuth } from 'amazon-cognito-auth-js';

class AuthService {
    constructor() {
        // 初始化Cognito实例
        this.auth = new CognitoAuth({
            // 你的Cognito配置参数
        });
        this.currentAccessToken = null;
    }

    async refreshToken() {
        // 实现Cognito刷新逻辑
        const session = await this.auth.refreshSession();
        this.currentAccessToken = session.getAccessToken().getJwtToken();
        return this.currentAccessToken;
    }

    // 其他工具方法，比如获取当前Token
    getCurrentToken() {
        return this.currentAccessToken;
    }
}

// 导出单例实例
const authService = new AuthService();
export default authService;

2. 在useAuth Hook中使用工具类：

// AuthProvider.jsx
import { createContext, useContext, useMemo } from 'react';
import authService from './authUtils';

const AuthContext = createContext();

export function AuthProvider({ children }) {
    const refreshToken = async () => {
        return authService.refreshToken();
    };

    const getCurrentToken = () => {
        return authService.getCurrentToken();
    };

    const authValue = useMemo(() => ({
        refreshToken,
        getCurrentToken,
        // 其他Auth方法
    }), []);

    return (
        <AuthContext.Provider value={authValue}>
            {children}
        </AuthContext.Provider>
    );
}

export const useAuth = () => useContext(AuthContext);

3. 在Axios实例中直接调用工具类方法：

// apiClient.js
import axios from 'axios';
import authService from './authUtils';

const apiClient = axios.create({
    baseURL: API_BASE_URL,
    headers: {
        accept: 'application/json'
    }
});

apiClient.interceptors.response.use(
    (response) => response,
    async (error) => {
        const originalRequest = error.config;
        if (error.response.status === 403 && !originalRequest.retry) {
            originalRequest.retry = true;
            const access_token = await authService.refreshToken();
            originalRequest.headers.Authorization = `Bearer ${access_token}`;
            return apiClient(originalRequest);
        }
        throw error;
    }
);

export default apiClient;

该方案解耦了React上下文与认证逻辑，适合需要在非React环境中调用认证方法的场景。

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