用户登录时如何从前端获取身份验证令牌

Question

我正在尝试构建一个简单的项目，使用户可以在登录后从api搜索电影并将选定的电影添加到他们的“ / movies”页面。 我正在使用Nodejs，mongodb，express表示后端，使用vanilla javascript表示前端。

当用户注册或登录后，我将创建一个JWT令牌并将该令牌添加到数据库中。 我的目标是将他们重定向到他们的主页，即“ / user / movies”

• 假设用户已经第一次登录，并且关闭了 网站，经过一段时间（不足以使令牌过期） 用户再次打开该网站，然后转到“ / user / movies”（其中 需要验证。）

我的问题是，重新访问后，我们仍如何与用户保持身份验证，我们如何才能达到先前创建的令牌？

使用邮递员时，我可以从数据库中手动检查令牌，并在标题中输入授权令牌，然后发送发布请求以验证用户。

但是在浏览器中，我如何到达以前创建的令牌以再次验证用户？

• 我尝试了 localStorage ，但是，为了将令牌保存到
  localStorage，我需要从数据库中获取它，但是您不能
  更改后端的localStorage。

• 我尝试了带有仅http 标志的 cookies ，但是如何到达 来自前端的令牌，因为仅使用http，因此禁止使用javascript

为了从前端获取JWT令牌，我有什么选择，以便即使用户关闭网站并稍后返回，我仍可以使用户保持身份验证。 （不足以使令牌过期）

我对身份验证的工作方式还很陌生。如果我犯了逻辑错误，请告诉我。

Answer 1

• 首次验证用户身份时，请将令牌存储在 localStorage 中。
• 并且由于localStorage的数据永远不会被自己删除，因此您可以侦听 DOMContentLoaded 事件，在此事件中，您可以在访问页面时从localStorage检索令牌并对其进行身份验证。
• 您可以了解有关localStorage here
的更多信息

Answer 2

您需要发送JWT令牌以及其他数据，作为登录API的响应。在前端收到响应后，只需将JWT令牌通过“ localStorage.setItem（“ token”，response.data.token）存储到localStorage。

现在，即使用户关闭浏览器并再次出现，您仍然可以始终引用localStorage.getItem（“ token”）来获取令牌。用户注销时，请不要忘记通过localStorage.removeItem（“ token”）清除此localStoage。

另外请注意，在创建JWT令牌期间不要提供任何到期时间，否则即使将其本地存储在localStorage中，它也将在服务器端到期并给出“禁止的错误”