JWT LocalStorage vs Cookie

Question

我读了很多关于在哪里存储JWT的文章，似乎有很多人支持本地存储与cookie争论的双方。

Microsoft这样说基于令牌的身份验证：

若要在后续请求中发送令牌，请将令牌存储在 浏览器的本地存储。不要担心CSRF漏洞 如果令牌存储在浏览器的本地存储中。CSRF 是一个 当令牌存储在 Cookie 中时，会受到关注。

虽然像这样的帖子强烈提倡使用 cookie：

我今天看到的最大安全违规者是我们这些存储的人 本地存储中的 JWT(会话数据)。许多人没有意识到 JWT 本质上与用户名/密码相同。

我想创建一个 SPA 和移动应用程序都可以访问的 API。

我的理解是，SPA可以/应该将cookie与：

new CookieOptions
{
HttpOnly = true,
SameSite = SameSiteMode.Strict,
Secure = true
}

而移动应用程序会将 JWT 存储在设备上并将其添加到每个请求的授权标头中，因为它没有 cookie 的概念。

在以前的项目中，我在 SPA 中使用了 jwt-decode 来解析令牌中的用户信息(例如角色)。 如果我使用 HttpOnly cookie，这将如何工作，因为我无法访问令牌？

简而言之，将 JWT 存储在本地存储中是否安全，或者它应该始终是一个 cookie。 如果需要 Cookie，如何在客户端应用程序中确定用户的角色等？

Answer 1

使用"js-cookie"模块设置cookie非常常见。这是我如何将它与 jwt 一起使用的示例。

setSession(authResult) {
// Set the time that the Access Token will expire at
const expiresAt = authResult.expiresIn * 1000 + new Date().getTime();
// this.accessToken = authResult.accessToken;
this.idToken = authResult.idToken;
this.expiresAt = expiresAt;
Cookies.set("user", authResult.idTokenPayload);
Cookies.set("jwt", authResult.idToken);
Cookies.set("expiresAt", expiresAt);
// navigate to the home route
}
logout() {
Cookies.remove("user");
Cookies.remove("jwt");
Cookies.remove("expiresAt");
const auth = this.auth0;
auth.logout({
returnTo: "",
clientId: "awdf8adsf98blahblah"
});
}