在 Relay Modern 中处理身份验证

Posted 2023-03-08

【中文标题】在 Relay Modern 中处理身份验证

【英文标题】：Handling authentication in Relay Modern

【发布时间】：2017-11-23 08:35:09

【问题描述】：

我正在使用基于令牌的身份验证，想知道如何在 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 回调中收到有效令牌时该怎么做？

【问题讨论】：

您找到解决方案了吗？使用 Relay Classic 曾经有中间件。在 Apollo 中有类似的中间件：networkInterface.use([ applyMiddleware(req, next) ]); networkInterface.useAfter([ applyAfterware( response: headers , next) ]); Relay Modern 中没有任何内容。

【参考方案1】：

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

伪代码：

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

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

  ...

【讨论】：

如果存在与用户要求无关的数据，这似乎不是最佳选择？通用仪表板、首页等

【参考方案2】：

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

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

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

【讨论】：

1.问题是关于现代接力而不是阿波罗。 2. 该链接只是指向一个 repo 主页，而不是任何可能有洞察力的代码。 3.是的不成功?

你需要检查这个包是关于什么的。我说的是带有 Fetch1 的中间件）它可以与 RM 一起使用。它是一个中间件。您从哪里得到不能与 RM 一起使用的想法？ 2) repo 包含设置中间件所需的代码。您需要任何具体的指导吗？ 3）是的，我很久以前就更新了。