对JWT认证过程的误解

Question

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

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

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

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

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

Answer 1

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

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

针对您在下方的评论，我建议您将 signup/registration 流程与应用程序的 user-only 区域分开。这是一个典型的工作流程：

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

请注意，JWT 不完全参与注册过程，他们也不需要参与。用户JWT只需要在用户真正第一次登录后才存在。

Answer 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 });
  }
})

对JWT认证过程的误解

Misunderstanding the process of JWT authentication

apollo

reactjs

graphql

redux

apollo-client