Question

我正在使用基于令牌的身份验证，并想知道如何在Relay Modern中将它完全绑定在一起。我已经过了一半。任何帮助深表感谢。这是我的设置：

在<App />内的顶层我渲染<QueryRenderer />入口点。
在<LoginPage />内部组件中，我有一个表单，可在提交时触发 LoginUserMutation 。当我提供有效的用户名和密码组合时，我会收到一个令牌：
- 我通过localStorage.setItem('token', token)
- 然后我想通过/dashboard
在createRelayEnvironment.js内部 fetchQuery 我定义了如何向GraphQL后端发出网络请求：
- 这里我读一下我是否有一个存储在localStorage中的令牌，即const token = localStorage.getItem('token');
- 如果令牌可用，我设置以下标题：{ ..., 'authorization': 'Bearer ${token}' }。然后，后端可以对用户进行身份验证。

到目前为止，Soooo goood。不幸的是，有一个问题正在破坏图片。当令牌已经存储到localStorage后应用程序初始化时，此设置很有效。但不是这样，如果您当前未在localStorage中没有令牌条目的情况下进行身份验证。

如前所述，假设您在 LoginUserMutation 中，突变已成功并且您在onComplete回调中获得了有效的令牌。现在该怎么办？是的我将它存储在localStorage内。但是如果我将用户重定向到<Dashboard />组件，我就搞砸了。为什么？ - 仪表板组件需要受限数据。当应用程序首次初始化时，虽然未提供受限数据，因为没有令牌被发送到GraphQL端点。稍后当令牌最终在 LoginUserMutation 中可用时，Relay实际上并没有对它做任何事情。

TL;博士

Q1 在将用户发送到<Dashboard />之前，我如何 - 配备有效令牌 - 触发/dashboard组件所需数据的重新获取。

Q2 使用JSON Web令牌（JWT）时，是否有更好的方法来处理带Relay的身份验证？特别是，如果您在 LoginUserMutation 的onComplete回调中收到有效令牌，该怎么办？

Answer 1

在验证用户身份时，重新创建中继环境。您将删除任何现有缓存。这是建议的，因为你的缓存应该根据登录的用户而有所不同，所以完全删除它是正常的。

的伪代码：

ConcurrentLinkedQueue

Answer 2

经过一些修补后发现了一些可行的解决方案。我需要更改我的代码以包含以下内容。检查一下：https://github.com/apollographql/apollo-fetch

它可以通过Fetch来解决middlleware的问题。

更新：我试图让它运作但却没有成功。

在Relay Modern中处理身份验证

2 个答案: