React查询使用过时的标头（旧的JWT令牌）之后

Question

我在反应生态编程方面非常陌生，但这是上下文。

我们正在使用 React Query 和我们项目中的Axios库。作为Authmanager，我们正在使用KeyCloak，并且在库管理Auth Status的库中，我们有 a>。我们的服务器在一定的时间后根据我们的要求随机响应401，有时还会遇到一个繁琐的问题。

我们重现了错误的错误，使Keycloak的承载令仅在1分钟后到期。这几乎造成了401个错误，我们想知道为什么会发生这种错误。

假设我们有一个带有一些“活动”的屏幕，并且此屏幕是用户首先看到的屏幕。对于处理请求，在我们的代码中，我们使用一些引用useQuery的自定义钩子，例如：

export function useActivities(): UseQueryResult<ActivityList> {
    const { headers } = useHeaders();

    return useQuery(
        ['activities', today.start],
        () => getActivitiesList(headers), // Note 1
        {
            enabled: !!today.start,
        }
    );
}

重要的一点是我们useheaders用keycloak获取我们的更新标头令牌和我们的领域设置。 USEHEADERS几乎无处不在。

export function useHeaders(): UseHeaders {
    const { keycloak } = useKeycloak();
    const KEYCLOAK_REALM = remoteConfig().getString('KEYCLOAK_REALM');

    const headers = {
        Authorization: `Bearer ${keycloak?.token}`,
        Realm: KEYCLOAK_REALM,
    };

    return { headers };
}

现在，getActivitivitivitiesList很简单，如五：

async function getActivitiesList(headers: UseHeaders['headers']): Promise<ActivityList> {
    const url = `${BASE_URL}${VERSION}/activities/grouped?end=${end}&start=${start}`;

     // Note 2
    return axios
     .get(url, { headers })
     .then((res) => res.data)
     .catch((e) => console.error('Error fetching grouped activities:', e));
}

所有这些的问题是，每当KeyCloak触发刷新令牌时，keycloak>对象已更改，UseActivities内的标题已更改，但如果我在我的内部打印标题，则 getActivitivitiesList（//注意2），甚至在查询函数（// Note 1）中，标题将不会更新。有时，这只是导致提出两个请求（一个失败并显示错误，另一个实际上有效），其他时候该应用程序崩溃而没有任何解释。 This makes me wonder why the query function will not update its headers and passed the "old" headers inside getActivitiesList.

目前，我们正在以两个不同的观点来减轻此问题。

1. 给Axios全局标头
2. 在KeyCloak Init之后，我们立即通过axios.defaults.headers.common.realm = KeyCloak_Realm;从KeyCloak接收有效的令牌后，立即将其传递 。 axios.defaults.headers.common.authorization ='bearer $ {keycloak？.token}';

这不是一个完美的解决方案，我们在这里搜索有关此问题的一些信息。

有人得到类似的东西吗？如何管理USEQUERY函数中的令牌刷新？

Answer 1

近一年后，我可以承认我很愚蠢。实际上，解决方案非常简单。

tl; dr

一个人不能期望获得新的价值，如果值是一旦渲染就不会改变的const。但是，您可以“获取”一个新的令牌，并请求使用函数，而不仅仅是“初始化”为const。

// This is a function, not a simple const anymore
const headers = () => {
    Authorization: `Bearer ${keycloak?.token}`,
    Realm: KEYCLOAK_REALM,
};

// Usage, please note the "()" after headers, it's a function now!
axios.get(url, { headers() })

长答案

使用useheaders反应本地渲染循环将使挂钩一次。挂钩本身将初始化const标题，它将永远不会再改变，直到重新渲染会发生。但是，如果const标题在timeout时间之后不会更改，则令牌将无效。如果某些东西会导致重新渲染该钩子，则将重新定位const标题，因此它将包含一个新的令牌。

这是有时会起作用的原因，有时行不通。解决方案非常简单。由于usekeycloak始终是一个有效且新鲜的令牌，而不是使用简单的变量声明：

const headers = something

我们可以选择

const headers = () => something

始终返回新的新鲜（最终刷新）< em> ，在这种情况下，这将是我的宝贵令牌。