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

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

到目前为止一切都很好。不幸的是，有一个问题破坏了这一景象。当应用程序在 token 已存储到 localStorage 后初始化时，此设置非常有效。但如果您当前在 localStorage 中没有 token 条目而未进行身份验证，则情况并非如此。

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

tl;博士

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

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

请您参考如下方法:

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

伪代码:

class App extends PureComponent { 
  state = { 
    environment: createRelayEnvironment(), 
  }; 
 
  login = () => { 
    doLoginMutation({ 
      onSuccess: () => this.setState({ environment: createRelayEnvironment() }), 
    }) 
  } 
 
  ... 
}