使用 localStorage 进行身份验证答案

【问题标题】：React authentication using localStorage使用 localStorage 进行身份验证
【发布时间】：2018-03-21 03:51:10
【问题描述】：

我试图弄清楚如何为我的 React 应用程序构建一个基本的登录/注册功能。所以我正在考虑创建一个 HoC/父类来执行诸如登录和检查用户是否登录之类的操作。所以现在我来找你找出存储用户是否登录的最佳方法。我看到的是使用 localStorage。但是任何人都可以访问它，所以我可以存储一个标志，上面写着 isLoggedIn 什么的？我是否必须加密一些令牌，例如 username.password，然后在每个页面加载时调用数据库？这似乎有点多。还是有什么误解？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以使用 JSON Web 令牌 (JWT)。

当用户登录时，调用后端的 /login 来检查数据库的密码。如果成功，则发出一个包含用户名及其角色的 JWT，例如（不是密码）。

您始终可以通过直接使用 Javascript 验证令牌的加密签名来判断用户是否已登录（如果可读内容（例如用户名）已更改，则签名将不再匹配）。这样，在令牌过期之前，您无需查询数据库。

我看到的是使用 localStorage。但是任何真正正确的人都可以访问它

没有。它还具有advantage over cookie，只能从同一域访问。原则上有您的令牌被盗的一种方式（例如XSS attacks，或当您离开时从笔记本电脑上的开发工具复制），但您将添加到它的到期时间将使有效期只有几个小时。

【讨论】：

虽然在浏览器控制台中，我不能在受害者计算机上执行 localStorage.getItem() 之类的操作，然后在我的计算机上设置值吗？
@user1009698 是的，您可以使用它直到它过期。与 cookie 相同，这不是 localStorage 的错：而不是 localStorage.getItem(.)，只需执行 document.cookie。离开时锁定屏幕！
@JulienD 这并不完全正确，因为带有 HttpOnly 标志的 cookie 无法从 javascript 访问。