重新加载页面时,用户的login状态在前端丢失

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

而且,使用react + react-router + redux作为我的前端。

身份validation是基于sessionId + cookie

对于前端,我使用react-routeronEnter挂钩进行身份validation控制。 当用户成功login时,我将后端的用户信息保存到redux存储中。 喜欢这个:

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

一切都很好。

问题是: 当用户重新加载页面时,在REDX存储中caching的数据被擦除。 是的,我知道,REDEX商店有它的生命周期。

但是,当用户login时,如果他们重新加载页面,由于authentication数据从REDEX存储区中删除,前端将丢失用户信息。

他们的用户名将是未定义的,因为onEnter挂钩,他们将被redirect到login页面。

但是对于后端来说, session还是在redis

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

但对于我的情况。 用户重新加载页面时如何保持用户的login状态?

PS我设置cookie httpOnlyMax-Age 。 所以客户端无法获取或设置cookie

__update:__

我尝试将用户信息保存到localStorage。 所以,当用户login时,重新加载页面,我检查localStorage中是否有用户信息,如果是true,我将重置auth数据,如下所示:

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

所以,我可以使用它来实现自动login和redirect到home

但我认为这不可靠。 用户可以修改localStorage。 所以,如果用户清除localStorage。 用户信息和login状态也将进行。

使用localstorage来保存login信息不是一个好的做法,因为它不安全。

  1. 您可以允许在客户端读取Cookie,并在您的REDEX存储器进入时从Cookie获取login信息,

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

我会推荐第二种方法。