重新加载页面时，用户的登录状态在前端丢失

Question

我使用express + mongodb + redis + mongoose作为我的后端来提供api。

并使用react + react-router + redux作为我的前端。

身份验证基于sessionId + cookie。

对于前端，我使用react-router和onEnter挂钩执行身份验证控制。当用户成功登录时，我将用户信息从后端保存到redux存储中。像这样：

const auth = { username: 'novaline', isLogin: true};

到目前为止，一切都很好。

问题是：当用户重新加载页面时，会删除在redux商店中缓存的数据。是的，我知道，redux商店有它的生命周期。

但是，当用户登录时＆amp;如果他们重新加载页面，当从redux商店擦除auth数据时，前端将丢失用户信息。

他们的用户名将是未定义的，由于onEnter挂钩，他们将被重定向到login页面。

但对于后端，session仍在redis。

我知道jwt可以解决这个问题。

但是对于我的情况。如何在用户重新加载页面时保持用户的登录状态？

P.S。我设置了cookie httpOnly和Max-Age。因此，客户无法获取或设置cookie。

__ update：__

我尝试将用户信息保存到localStorage。因此，当用户登录，重新加载页面时，我检查localStorage中是否有用户信息，如果为true，我将重置auth数据，如下所示：

const auth = {username: localStorage.getItem('username'), isLogin: true};

因此，我可以使用它来实现自动登录并重定向到home页。

但我觉得它不可靠。用户可以修改localStorage。所以，如果用户清除localStorage。用户信息和登录状态也将继续。

Answer 1

使用localstorage保存登录信息不是一个好习惯，因为它不安全。

1. 您可以在客户端读取cookie，并在您的redux商店进入时从cookie获取登录信息，

2. 否则，当您的应用程序加载以从服务器获取用户登录状态时，请进行api调用。

我建议采用第二种方法。