在Relay Modern中处理身份验证

Question

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

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

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

如前所述，假设您位于LoginUserMutation内部，该突变已成功完成，并且您在onComplete回调中获得了有效令牌。 现在该怎么办？ 是的，我将其存储在localStorage 。 但是，如果我将用户重定向到<Dashboard />组件，则会很麻烦。 为什么？ -仪表板组件需要受限的数据。 当应用程序首次初始化时，尽管未提供受限数据，因为没有令牌发送到GraphQL端点。 然后，当令牌最终在LoginUserMutation中继中可用时，中继实际上不会对其执行任何操作。

tl; dr

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

Q2使用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解决中间件的问题。

更新：我试图使其正常运行，但未成功。