在 Relay Modern 中处理身份验证

Question

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

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

到目前为止太好了。不幸的是，有一个问题破坏了画面。当令牌已存储到 localStorage 后应用程序初始化时，此设置非常有效。但是，如果您当前在 localStorage 中没有令牌条目而未经身份验证，则不是这样。

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

tl;dr

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

第二季度 使用 JSON Web 令牌 (JWT) 时，是否有更好的方法来处理带有中继的身份验证？特别是，从您在 LoginUserMutation 的 onComplete 回调中收到有效令牌时该怎么做？

Answer 1

验证您的用户时，重新创建中继环境。 您将删除任何现有的缓存。这是推荐的，因为无论如何您的缓存应该根据登录的用户而有所不同，因此完全删除它是可以的。

伪代码：

class App extends PureComponent {
  state = {
    environment: createRelayEnvironment(),
  };

  login = () => {
    doLoginMutation({
      onSuccess: () => this.setState({ environment: createRelayEnvironment() }),
    })
  }

  ...
}

Answer 2

经过一番修修补补，找到了一些可行的解决方案。我需要更改我的代码以包含以下内容。看看这个：https://github.com/apollographql/apollo-fetch

可以通过Fetch解决中间件问题。

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