reactjs - JWT LocalStorage 与 Cookie
问题描述
我已经阅读了很多关于在哪里存储 JWT 的文章,并且似乎有很多人支持本地存储与 cookie 争论的双方。
微软这样说关于基于令牌的身份验证:
要在后续请求中发送令牌,请将令牌存储在浏览器的本地存储中。如果令牌存储在浏览器的本地存储中,请不要担心 CSRF 漏洞。当令牌存储在 cookie 中时,CSRF 是一个问题。
虽然像这样的帖子强烈主张使用 cookie:
我今天看到的最大的安全违规者是我们这些将 JWT(会话数据)存储在本地存储中的人。许多人没有意识到 JWT 本质上与用户名/密码相同。
我想创建一个可供 SPA 和移动应用程序访问的 API。
我的理解是 SPA 可以/应该使用 cookie:
new CookieOptions
{
HttpOnly = true,
SameSite = SameSiteMode.Strict,
Secure = true
}
而移动应用程序会将 JWT 存储在设备上并将其添加到每个请求的 Authorization 标头中,因为它没有 cookie 的概念。
在以前的项目中,我在我的 SPA 中使用jwt-decode从令牌中解析用户信息(例如角色)。如果我使用 HttpOnly cookie,因为我无法访问令牌,这将如何工作?
简而言之,将 JWT 存储在本地存储中是否安全,或者它应该始终是 cookie。如果需要 cookie,我如何确定客户端应用程序中用户的角色等?
解决方案
使用“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"
});
}
推荐阅读
- c++ - 快速排序算法引发堆栈转储错误的 C++ 运行时错误
- python - 需要在python中迭代字典列表并仅以列表形式获取dict的值
- ios - 目标 C - 不知道用于选择的类方法
- python - django viewset 扩展 mixins.UpdateModelMixin 但邮递员通过补丁方法更新模型返回'细节:不允许方法补丁'
- python - 我在这个带有 pool.map 的文件中做错了什么,导致什么都没有出现,我必须重新启动 shell?
- html - 第一行和第二行之间有间隙的自定义单选按钮
- vue.js - 注销时清除 nuxt 存储和所有子模块
- c# - 卡在 HttpPost 方法上,试图输入 JSON 文本,但对象应该是“空的”
- aws-lambda - 如何根据请求主体变量/项目执行不同的 aws lambda(aws api 网关)
- bing - 需要防止网站链接显示在 Bing 搜索结果中