重新加载页面时,用户的login状态在前端丢失
我使用express
+ mongodb
+ redis
+ mongoose
作为我的后端提供api。
而且,使用react
+ react-router
+ redux
作为我的前端。
身份validation是基于sessionId
+ cookie
。
对于前端,我使用react-router
和onEnter
挂钩进行身份validation控制。 当用户成功login时,我将后端的用户信息保存到redux存储中。 喜欢这个:
const auth = { username: 'novaline', isLogin: true};
一切都很好。
问题是: 当用户重新加载页面时,在REDX存储中caching的数据被擦除。 是的,我知道,REDEX商店有它的生命周期。
但是,当用户login时,如果他们重新加载页面,由于authentication数据从REDEX存储区中删除,前端将丢失用户信息。
他们的用户名将是未定义的,因为onEnter
挂钩,他们将被redirect到login
页面。
但是对于后端来说, session
还是在redis
。
我知道jwt
可以解决这个问题。
但对于我的情况。 用户重新加载页面时如何保持用户的login状态?
PS我设置cookie
httpOnly
和Max-Age
。 所以客户端无法获取或设置cookie
。
__update:__
我尝试将用户信息保存到localStorage。 所以,当用户login时,重新加载页面,我检查localStorage中是否有用户信息,如果是true,我将重置auth数据,如下所示:
const auth = {username: localStorage.getItem('username'), isLogin: true};
所以,我可以使用它来实现自动login和redirect到home
。
但我认为这不可靠。 用户可以修改localStorage。 所以,如果用户清除localStorage。 用户信息和login状态也将进行。
使用localstorage
来保存login信息不是一个好的做法,因为它不安全。
-
您可以允许在客户端读取Cookie,并在您的REDEX存储器进入时从Cookie获取login信息,
-
否则,当您的应用程序加载从服务器获取用户login状态时,请进行api调用。
我会推荐第二种方法。