React Authentication，使用上下文是不是有意义

Posted 2023-03-10

【中文标题】React Authentication，使用上下文是不是有意义

【英文标题】：React Authentication, is there a point in using contextReact Authentication，使用上下文是否有意义

【发布时间】：2020-08-16 02:01:36

【问题描述】：

我一直在尝试为我的 react 应用添加一些安全性。我正在使用 JWT 令牌并将其存储在本地存储中。将它存储在本地存储对我来说不是很有吸引力，我决定使用上下文 API 将令牌移动到反应上下文中。但是，经过一些研究，我了解到将 JWT 存储在本地存储中并没有那么糟糕，我仍然需要那里的令牌才能让用户在刷新后继续。

那么，如果我还是要将令牌存储在那里，是否值得拥有一个上下文对象来存储用户？

在我看来，只需执行localStorage.get("token") 就足够了。

【问题讨论】：

当在上下文中保存/更新时，如果需要该值的组件发生更改，它将重新呈现。当存储在本地存储中时，您需要弄清楚如何通知组件值发生变化（如果这是必需的）。但正如你已经知道的那样；您需要将其保存到本地存储，以便在会话之间保留令牌。

【参考方案1】：

值得吗？

context 和 localStorage 都使用全局状态，在两个地方存储相同的令牌是一种反模式。

我建议将User 信息存储在上下文中，并将令牌存储在本地存储中。

【讨论】：

如下所述，将令牌存储在本地存储中会增加 XSS 攻击的漏洞。

【参考方案2】：

不要将 jwt 令牌存储在本地存储中，因为它容易受到 XSS 攻击。所以最好使用上下文 API。

【讨论】：

但是如何持久化令牌以使页面刷新不会清除令牌？