JWT 本地存储, Cookies 和页面重载答案

【问题标题】：JWT Local storage , Cookies and Page ReloadJWT 本地存储, Cookies 和页面重载
【发布时间】：2021-08-20 08:41:31
【问题描述】：

我了解基于 cookie 和基于 JWT 的身份验证之间的区别。

我了解在通过 fetch 调用 API 之前，我可以访问本地存储以获取令牌值并通过请求传递它。如果我重新加载页面，这将如何工作？如果我使用了 cookie，它会自动在 HTTP 请求中发送。

请帮忙澄清一下。

【问题讨论】：

【解决方案1】：

您的服务器应该向您的客户端发送一个仅限 http 的 cookie。 cookie 可能包含 jwt 令牌。然后，只需将此 cookie 附加到您的所有请求中。

如果您使用的是 axios，您可以使用 withCredentials: true。如果您使用普通 XHR https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials 了解更多信息。

所以当用户打开页面，调用服务器，就知道他是否登录了。如果是这样，只需在 sessionStorage 中添加一个isLogged: true。

这将是一个简单而安全的解决方案。

【讨论】：

嗨 @DoneDeal0 那么我可以确认将 JWT 与 localstorage 一起使用不适合多页应用程序吗？
你可以。它根本不安全。任何人和任何脚本都可以访问和解码它。如果您希望您的令牌是安全的，请使用 http-only cookie。
我仍然无法弄清楚将 JWT 存储在 localstorage 中如何与多页应用程序一起使用。假设我的应用程序中有页面 A、页面 B、页面 C。从页面 A，我登录并重定向到页面 B。从页面 B，如果我进行页面刷新，后端服务器如何知道我是登录用户（因为 JWT 存储在本地存储中并且不会自动获取在浏览器 GET 请求中传递页面 B)？
如果你有一个 jwt 存储在本地存储中，你可以在你的前端检查它，并且知道用户已经登录。然后您可以根据此信息阻止 api 调用。但是“正确”的做法是将cookie传递给您的所有api请求，以便后端可以解析它并检查它的有效性（它是否来自正确的域，它是否仍然有效等），然后才允许访问路线。