为什么我们的 React 查询重新获取会导致 401 响应？

Question

我们有一个使用 keycloak 来发布和验证 JWT 的应用程序。

我们还使用react-query，并将

refetchOnWindowFocus

设置为 true。

当react-query在一段时间不活动后重新获取数据时，如果用户没有与窗口交互，我们会从服务器收到401响应。一旦我们与页面交互，相同的请求就会返回成功的 200 响应。网络选项卡如下所示：

当我在一段时间不活动后聚焦窗口时，我会重新获取并重试 3 次（根据配置），并导致 401 响应。一旦我主动点击浏览器窗口，请求就会再次触发，我会收到 200 响应。

这是为什么？

据我从网络选项卡得知，这两种情况下的请求似乎是相同的。

Authorization

标头中的 Bearer 令牌是相同的。 <- this turns out to be incorrect. the tokens used are different. the requests that resulted in a 401 used outdated tokens. see my answer below for details.

这里发生了什么？

Answer 1

我们能够解决这个问题。事实证明，来自

useKeycloak

的

react-keycloak/web

钩子不会反应性地处理令牌状态（https://github.com/react-keycloak/react-keycloak/issues/116）。

这导致我们的

useAuthenticationHelper

使用过时的代币。

对我们有用的解决方法（至少在短期内）是使用

onTokens

的

ReactKeycloakProvider

事件侦听器来更新全局可用的 TokenContext 并在我们的

useAuthenticationHelper

中使用该上下文。

由于

react-keycloak

库不再维护，我们将很快迁移到

react-oidc-context

。