Question

我很困惑在最佳位置将登录的用户详细信息存储在React / Redux应用程序中，这样我就可以访问每条路由标头中的名字和姓氏。

我在localStorage中存储了用户api密钥（JWT），但是由于XSS漏洞，我发现将名字，姓氏，电子邮件之类的内容存储在localStorage中是一种不好的做法。

我不希望仅在返回相同的用户详细信息时就点击每条路线的API。

我尝试将它们作为session.user存储在redux存储中，当我刷新页面或手动更改URL时，该存储未设置。（通过redux saga push更改路线时会维护商店）

如何存储要在多条路线中使用并刷新页面的名字，姓氏等？

Answer 1

我的建议是，当用户登录到您的网站时，为其创建会话标识符并将其存储在经过密码签名的cookie中。确保您的Web框架使用的任何cookie库都设置了httpOnly cookie标志。此标志使浏览器无法读取任何cookie，这是安全使用cookie的服务器端会话所必需的。确保您的cookie库还设置SameSite = strict cookie标志（以防止CSRF攻击），以及secure = true标志（以确保cookie只能通过加密连接设置）。每次用户向您的网站发出请求时，请使用其会话ID（从他们发送给您的cookie中提取）从数据库或缓存中检索其帐户详细信息（取决于您的网站的大小）

Answer 2

Redux会将数据存储在浏览器内存中，如果进行完全刷新，则它将丢失。

如果即使在刷新后仍要保留数据，则可以将redux存储保留到浏览器会话存储https://github.com/ilyagelman/redux-sessionstorage

否则，您可以将所需的数据保存在会话存储中的所有页面中，而无需进行重新处理。

Answer 3

如果没有实际将此信息存储在localstoarge中，则只有一种方法可以实现。您的顶级组件将在每次浏览器刷新时重新安装，因此在该组件安装完毕后，您可以触发请求以从服务器获取此信息并将其存储在您的redux存储中。

Answer 4

Redux全局状态在页面刷新时初始化。您需要将userDetails保存在localStorage中，这样即使刷新页面后，它也可以在所有路由中使用。这是您可以执行的操作：

设置本地存储：

 const userDetails = {userName: "foo", pass: "bar"}
 localStorage.setItem('userDetails', JSON.stringify(userDetails));

从localStorage访问userDetails：

const userDetils = JSON.parse(localStorage.getItem( 'userDetails'));

React Redux-存储登录的用户详细信息

4 个答案: