对JWT认证流程的误解答案

【问题标题】：Misunderstanding the process of JWT authentication对JWT认证流程的误解
【发布时间】：2020-07-15 12:28:52
【问题描述】：

我使用 React + Redux + Apollo Client + Graphql 创建项目

当我们需要登录我们的应用程序时，我们需要使用令牌（例如保存在 localStorage 中），它被放入 headers 参数中，如下代码所示：

const client = new ApolloClient ({
 uri: 'http://localhost:4000/api',
 headers: {
  authorization: `Bearer ${localStorage.token}`,
 }, 
});

在请求服务器验证令牌并知道谁是用户之后。

我的问题：我们需要从哪里获取令牌并将其放入 headers 参数以进行登录（注册）过程？一个新客户来到我们的登录页面，他一开始没有令牌（在 localStorage 或其他地方），但服务器在请求中需要它。如果我们从客户端中删除 headers 参数，登录过程将继续，但服务器将不知道当前用户是谁。

【问题讨论】：

这能回答你的问题吗？ apollographql.com/docs/react/networking/authentication/#header
@Agney，不，文档说你需要放标题，但不要包括我的情况

标签： reactjs redux graphql apollo apollo-client

【解决方案1】：

通常，服务器会发出 JWT 令牌，这将在用户登录期间或可能在帐户创建期间发生。对于这些特定的调用，您应该不在标头中期待 JWT。相反，用户将传递凭据，例如用户名和密码。对于大多数其他调用，在请求的标头中传递 JWT 是合适的。

请记住，JWT 的主要目的是让用户在大多数请求期间不必提供个人凭据。相反，用户只需出示 JWT，就像出示护照一样，即可访问您的网络服务。

针对您的以下 cmets，我建议您将注册/注册过程与应用程序的用户专用区域分开。这是一个典型的工作流程：

潜在用户访问您的网站，并通过选择用户名和密码以及可能通过提供某些其他个人信息来创建帐户
您的应用程序创建一个帐户，然后将电子邮件验证链接发送到用户的电子邮件地址。服务器将用户带到提及所有这些的页面上
用户打开包含验证链接的电子邮件，单击该链接将激活帐户。您的应用程序会返回一个网页，然后要求用户登录。
最后，用户从正常登录页面登录。

请注意，JWT 根本没有参与注册过程，也不需要参与。用户 JWT 只需要在用户第一次真正登录后才存在。

【讨论】：

所以我只需要在创建帐户期间向服务器发送凭据吗？但是在那种情况下，服务器如何知道谁是当前用户？
@rgdzv 如果账户还不存在，那么服务器将不知道用户是谁。
我的情况有点复杂。注册过程后，我需要将用户重定向到另一个页面。在该页面上，我需要显示用户的名字和第二个名称（我需要从登录过程中获取，但它只提供令牌）。该页面还与用户的编辑信息有关。如果服务器不知道谁是当前用户，它将无法更新当前用户的信息
检查更新的答案。您正在询问（并且似乎对）多个事情，而不仅仅是 JWT。
感谢您的回答。我明白我需要避免我的处境。是否可以在您想要的页面上注册后重定向用户并将他视为当前用户？

【解决方案2】：

决定：

您需要检查 localStorage 中的令牌，如果令牌存在则更新请求

const client = new ApolloClient({
  uri: 'http://localhost:4000/api',
  request (operation) {
    const headers = {};
    const token = localStorage.getItem('token');
    if (token) headers.authorization = 'Bearer ' + token;
    operation.setContext({ headers });
  }
})

【讨论】：