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

Question

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

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

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

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

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

但是在浏览器中，我怎样才能访问我之前创建的令牌以再次验证用户？

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

• 我已经尝试了带有http-only标志的cookie，但是我如何从前端访问令牌，因为 http-only 限制了使用 javascript

为了从前端获取 JWT 令牌，我有哪些选择，以便我可以保持用户仍然经过身份验证，即使在他们关闭网站并稍后返回之后也是如此。（不足以使令牌过期）

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

标签： javascriptnode.jsexpressjwtjwt-auth

Answer 1

您需要将 JWT 令牌与其他数据一起作为登录 API 的响应发送。在前端收到响应后，只需通过“localStorage.setItem("token",response.data.token) 将 JWT Token 存储到 localStorage。

现在，即使用户关闭浏览器并再次返回，您也可以随时参考 localStorage.getItem("token") 来获取令牌。请不要忘记在用户注销时通过 localStorage.removeItem("token") 清除此 localStoage。

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