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

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

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

我不希望为了返回相同的用户详细信息而在每个路由上都使用API

我尝试将它们作为session.user存储在redux存储中，当我进行页面刷新或手动更改URL时，会将其取消设置。（通过redux saga

推送更改路线时，将保持存储）

如何存储要跨多个路由和页面刷新使用的名字、姓氏等？
Redux将数据存储在浏览器内存中，如果进行完全刷新，数据将丢失

如果要在刷新后仍保留数据，可以将redux存储持久化到浏览器会话存储

否则，您可以将所需的数据保存在会话存储中的所有页面中，而无需执行redux操作。
redux全局状态在页面刷新时初始化。您需要在
localStorage
中保存userDetails，这样即使在刷新页面后，它也可以跨所有路由使用。
这就是你可以做到的：

设置本地存储：

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

从本地存储访问用户详细信息：

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

如果不将这些信息实际存储在localstoarge中，我只有一种方法可以实现这一点。您的顶级组件将在每次浏览器刷新时重新装载，因此在该组件的did装载中，您可以发出请求从服务器获取此信息，并将其存储在redux存储中
 我的建议是，当用户登录到您的网站时，为他们创建会话标识符，并将其存储在加密签名的cookie中。确保web框架使用的任何cookie库都设置了httpOnly cookie标志。此标志使浏览器无法读取任何Cookie，这是安全使用带有Cookie的服务器端会话所必需的。确保cookie库还设置了SameSite=strict cookie标志（以防止CSRF攻击）以及secure=true标志（以确保只能通过加密连接设置cookie）。每次用户向您的站点发出请求时，使用他们的会话ID（从他们发送给您的cookie中提取）从数据库或缓存中检索他们的帐户详细信息（取决于您的网站有多大）
不希望在每个路由上调用API。是的，您不会这样做。顶级组件的did挂载仅在浏览器刷新时启动，但仅在应用程序中导航不应重新挂载顶级组件。
react router dom
s
重定向如何？因为这实际上是我如何碰巧碰到这个问题，但是注意到刷新具有相同的效果。如果您只存储JWT，并且只使用JWT来验证API调用，那么您应该考虑将其存储为HTTPiokCookie，而不是用ReDux来处理它。