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

【问题标题】：Persisting User Sessions with Httponly Cookies in React在 React 中使用 Httponly Cookie 持久化用户会话
【发布时间】：2020-06-14 09:04:54
【问题描述】：

当使用 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。最好的方法是点击一个端点，看看是否有一个有效的会话，然后返回用户数据？

【问题讨论】：

标签： reactjs express security

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

或者确实提到ttl，这样它也会有一些到期时间

【讨论】：

正如我所提到的，这是使用 HttpOnly cookie。重点是避免在客户端上存储任何内容。