在Relay Modern中处理身份验证

Question

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

• 在里面的顶层<App />我渲染<QueryRenderer />入口点.
• 在<LoginPage />组件内部,我有一个表单,在提交时触发LoginUserMutation.当我提供有效的用户名和密码组合时,我会收到一个令牌:
  • 我保存在该令牌的localStorage通过localStorage.setItem('token', token)
  • 然后我想将用户重定向到/dashboard路由history.push('/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

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

伪代码：

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

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

  ...
}