React Admin客户端请求Authorization Header发送不一致问题求助

问题核心 #

React Admin集成Hydra数据Provider时，请求携带的X-Authorization头存在不稳定情况：有时正常携带token，有时缺失，偶尔刷新页面可恢复。已尝试在请求头生成逻辑中添加refresh token自动刷新，但未解决问题。

代码问题分析 #

你的getAuthHeaders函数存在异步操作同步返回的逻辑错误：

• 当token缺失且存在可用refresh token时，waitForTokenRefresh().then(...)是异步执行的，但函数已经同步返回了headers对象。此时异步设置头的操作不会影响已经返回的headers，导致请求发送时仍然没有携带token。
• getHydraWithHeaders和apiDocumentationParser均同步调用getAuthHeaders，无法等待token刷新完成就发送请求。

修复方案 #

将getAuthHeaders改为异步函数，确保所有token相关操作完成后再返回headers，并修改依赖它的函数为异步等待：

修改后的核心代码 #

const getAuthHeaders = async () => {
    const headers = new Headers({"Content-Type": "application/ld+json"})
    let token = inMemoryJwt.getToken()

    // 如果无可用token且存在refresh token，等待刷新完成
    if (!token && inMemoryJwt.checkAvailableRefreshToken()) {
        await inMemoryJwt.waitForTokenRefresh()
        token = inMemoryJwt.getToken()
    }

    // 存在token则设置请求头
    if (token) {
        headers.set("X-Authorization", token)
    }

    return headers;
};

const getHydraWithHeaders = async (url, options = {}) => {
    console.log({urlSet: url})
    const headers = await getAuthHeaders()
    return fetchHydra(url, {
        ...options,
        withCredentials: true, 
        headers: headers,
    })
}

const apiDocumentationParser = async () => {
    try {
        const headers = await getAuthHeaders()
        return await parseHydraDocumentation("/api", { headers })
    } catch (result) {
        const { api, request, status } = result;
        if (status !== 401 || !request) {
            throw result;
        }
    
        inMemoryJwt.ereaseToken()
    
        return {
            api,
            request,
            status,
        }
    }
}

额外排查点 #

• 检查inMemoryJwt的内部实现，确认是否存在竞态条件（比如多个请求同时触发token刷新，导致token状态不一致）
• 登录后验证inMemoryJwt.getToken()是否能稳定返回有效token，排除token被意外清空的可能
• 在getAuthHeaders中添加日志，记录每次token获取、刷新的状态，便于定位具体请求的异常情况

相关报错信息 #

当未携带Auth头时，后端响应：

access-control-allow-headers: Content-Type, Accept, Origin, X-Authorization
access-control-allow-methods: GET, POST, OPTIONS, PATCH, PUT, DELETE
access-control-allow-origin:*
access-control-expose-headers:*
alt-svc:h3=":443"; ma=2592000
cache-control:no-cache, private
content-length:44
content-range:*
content-type:application/json
date:Thu, 28 Nov 2024 15:32:06 GMT
server:Caddy
status:401 Unauthorized
www-authenticate:Bearer
x-debug-token:0acbca
x-debug-token-link:https://localhost/_profiler/0acbca
x-powered-by:PHP/8.3.11
x-robots-tag:noindex

响应体：

{
    "code": 401,
    "message": "JWT Token not found"
}

React Admin页面报错：

Cannot read properties of undefined (reading 'length')

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