JavaScript异步请求中401错误与令牌刷新：并发处理策略与实践

export class TokenFlushInterceptor {
    private awaitingPromise: Promise<string> | null = null; // 存储刷新令牌的Promise

    private async retry(response: Response, requestOptions: RequestInit, token: string): Promise<Response> {
        // 使用新令牌重试原请求
        return fetch(response.url, {
            ...requestOptions,
            headers: {
                ...requestOptions!.headers,
                Authorization: `Bearer ${token}`,
            },
        });
    }

    public async intercept(response: Response, requestOptions?: RequestInit): Promise<Response> {
        if (AUTH_RESPONSE_CODES.UNAUTHORIZED === response.status) {
            if (this.awaitingPromise) {
                // 如果已有刷新操作在进行，则等待其完成
                const newToken = await this.awaitingPromise;
                // 注意：这里原代码有将 awaitingPromise 置为 null 的操作，这可能导致问题
                // this.awaitingPromise = null; // 潜在问题点

                const retryRequest = await this.retry(response, requestOptions!, newToken);
                // this.awaitingPromise = null; // 潜在问题点

                return retryRequest;
            }

            // 如果没有刷新操作在进行，则发起新的刷新
            const store = ReduxService.serverReduxStore; // 假设ReduxService可用
            if (!store) {
                return response; // 无法刷新，直接返回原响应
            }

            // 发起刷新令牌操作，并将其Promise保存
            this.awaitingPromise = store.dispatch(flushToken) as Promise<string>;
            const newToken = await this.awaitingPromise;

            // 注意：这里原代码有将 awaitingPromise 置为 null 的操作
            // this.awaitingPromise = null; // 潜在问题点

            const retryRequest = await this.retry(response, requestOptions!, newToken);
            // this.awaitingPromise = null; // 潜在问题点
            return retryRequest;
        }

        return response;
    }
}

// 定义一个常量用于认证响应码
const AUTH_RESPONSE_CODES = {
    UNAUTHORIZED: 401,
};

// 假设 ReduxService 和 flushToken 是可用的
// 例如：
// import { store } from './redux/store'; // 假设 Redux store 实例
// const ReduxService = { serverReduxStore: store };
// const flushToken = () => { /* 实际的刷新令牌dispatch操作，返回一个Promise */ return Promise.resolve("new_jwt_token"); };

export class TokenFlushInterceptor {
    private awaitingPromise: Promise<string> | null = null; // 存储刷新令牌的Promise

    /**
     * 重试原始请求，使用新的令牌
     * @param response 原始的401响应
     * @param requestOptions 原始请求的配置
     * @param token 新的JWT令牌
     * @returns 重试后的响应
     */
    private async retry(response: Response, requestOptions: RequestInit, token: string): Promise<Response> {
        const headers = {
            ...requestOptions?.headers,
            Authorization: `Bearer ${token}`,
        };
        return fetch(response.url, {
            ...requestOptions,
            headers,
        });
    }

    /**
     * 拦截器核心逻辑
     * @param response 接收到的响应
     * @param requestOptions 请求配置
     * @returns 处理后的响应
     */
    public async intercept(response: Response, requestOptions?: RequestInit): Promise<Response> {
        // 如果不是401错误，则直接返回响应
        if (AUTH_RESPONSE_CODES.UNAUTHORIZED !== response.status) {
            return response;
        }

        let currentRefreshPromise: Promise<string>;

        // 检查是否已经有令牌刷新操作在进行
        if (this.awaitingPromise) {
            // 如果有，则所有后续的401请求都等待同一个刷新Promise
            currentRefreshPromise = this.awaitingPromise;
        } else {
            // 如果没有，则发起一个新的令牌刷新操作
            const store = ReduxService.serverReduxStore;
            if (!store) {
                console.error("Redux store not available for token refresh.");
                throw new Error("Failed to refresh token: Redux store not initialized.");
            }

            // 发起刷新令牌的dispatch，并将其Promise保存到 awaitingPromise
            // 确保 flushToken 返回一个 Promise<string>
            currentRefreshPromise = store.dispatch(flushToken) as Promise<string>;
            this.awaitingPromise = currentRefreshPromise;

            // 关键：在刷新Promise完成（无论成功或失败）后，清除 awaitingPromise
            // 这样确保只有当所有刷新逻辑都完成后，才能发起新的刷新