React 前端 + Express.js 会话

Posted 2023-02-22

【中文标题】React 前端 + Express.js 会话

【英文标题】：React front-end + Express.js Sessions

【发布时间】：2019-01-30 21:57:25

【问题描述】：

我有基于 Express.js 的后端 API 和基于 React-Redux 的客户端。

对我的 API 的验证由 Express.js 会话完成。用户通过 Passport (OAuth2) 登录，然后将用户的 cookie 保存到与其用户 ID 连接的数据库中。此 cookie 也在客户端浏览器的 cookie 存储中。

如果您向此 API 发送下一个请求，服务器会使用数据库检查您的 cookie，如果正确，它会回复您的数据。

当我不使用 React 时它运行良好，但现在客户端必须以某种方式知道用户已登录，甚至在你发出一些请求之前（当 React 应用程序加载时）。

即使用户没有登录，会话cookie也会被保存，所以我迷路了。

怎么做？

工作原理图片： https://i.stack.imgur.com/6g0ei.png

附加研究：

例如，我正在调查https://www.instagram.com/...他们使用会话cookie...如果我删除此cookie，用户将被注销，当我在Postman 中使用此cookie 时，我可以获取API。但我找不到任何检查用户是否登录的请求。 React App 只是在收到来自服务器的初始数据后才知道它。也许他们将这些信息从服务器推送到 React 中？不是在加载应用后调用 API 吗？

【问题讨论】：

22 个人中没人知道？

从设计的角度来看，你不能依赖客户端来“知道”任何事情。客户端是互联网的狂野丛林。他们会向您发送cookies。他们不会向您发送 cookie。他们会向您发送不正确的 cookie。您拥有的唯一控制权是在服务器端。这意味着每个请求——对于 React 网页内容、数据、任何东西——都必须在服务器端进行筛选以进行身份​​验证。

所以当你说，“客户端必须以某种方式知道用户在你发出请求之前就已经登录了”——不，这不是它的工作原理。无论如何，客户端都会发出请求。各种要求。您的服务器的工作就是按照您想要的方式回答。

@AndyTaton 但是当我第一次从服务器加载 React 应用程序（我启动浏览器）时，我只需要能够告诉初始 React 的状态，即用户已登录以显示登录用户的 UI，而不是对于未记录的....

@AndyTaton 我知道客户端很笨，我知道我需要处理每个请求，但我不知道如何告诉 React 用户在加载应用程序后何时登录

【参考方案1】：

这里有一些对我有用的东西来解决这个问题。

由于前端不知道用户，但后端可以通过 cookie 的存在和护照创建的属性 request.user 来判断用户是谁，我们必须询问后端用户是谁。

在后端创建一个路由，比如 api/user。它只是查找 cookie 并获取用户并将该 json 发送回。如果没有用户，则服务器回复没有用户。也许我们可以在这里重定向到护照登录，但我只是在前端做了 window.open(/auth/github)。

TLDR，前端不认识用户？询问后端。

【参考方案2】：

我解决这个问题的方式与安迪·塔顿在他的回答中表达的一样。它是这样的：

客户端：

componentDidMount() 
    api('/profile').get().then(data => 
        console.log('/profile data', data)
    )

服务器端：

  app.get('/profile', (req, res) => 
    if (req.user) 
      db.Favorite.find( uid: req.user._id ).then(user => 
        return res.status(200).json(user)
      )
     else 
      return res.status(403).json( message: 'you are not logged in' )
    
  )

如果使用 ES6 fetch，您的请求必须包含 credentials: "include"，如果使用 axios，则必须包含 withCredentials: true。

检查this code sample，它包含一个使用 Twitter 身份验证的工作示例。 希望对您有所帮助！