在 React 中使用 Httponly Cookie 持久化用户会话

IT技术 reactjs express security
2021-05-21 15:15:03

我试图找出在使用 HttpOnly cookie 存储会话数据时,通过 React 在客户端获取用户数据/保留用户会话的最佳方法是什么。

我正在考虑做类似的事情:

useEffect( () => {

const getSession = async () => {
   const session = await fetch('/session/current')

   if(session){
       .... there is an active session
        .... set the local state to hold user data
      }   
   }

   getsession();
}

所以我想弄清楚的问题是,当用户登录并关闭浏览器时,然后重新进入我的网站。如何验证用户仍然具有有效的会话,然后将必要的用户数据发送到客户端以了解用户已通过身份验证?

当用户登录并关闭浏览器时,服务器端仍然存在有效的会话HttpOnly cookie。最好的方法是点击一个端点,看看是否有一个有效的会话,然后返回用户数据?

2个回答

首先,一旦您在用户登录后从服务器获取 cookie 或令牌,您将不得不将其存储在浏览器本身的本地会话存储中,因此如果用户关闭浏览器并重新打开它会自动退出,

或者提一下ttl,这样它也会有一些到期时间

没有办法从客户端处理这个,因为它是一个 httponly cookie。您需要将 cookie 发送到后端以验证会话。如果用户关闭并重新打开浏览器,他们就会丢失 cookie。为了让他们保持登录状态,您需要跟踪来自用户的一些其他信息,例如他们的 IP 地址、操作系统、浏览器类型等,并将其保存在内存缓存中以供 ttl 使用。但这样做并不安全。