javascript - React 前端 + Express.js Sessions

Question

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

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

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

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

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

怎么做？

关于它是如何工作的图片:
/image/6g0ei.png

其他研究:

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

Answer 1

我解决这个问题的方式与安迪·塔顿在他的回答中表达的相同。它以某种方式是这样的:

客户端:

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 获取，或 withCredentials: true 如果使用 axios。

查询 this code sample ，它包含一个带有 Twitter 身份验证的工作示例。
希望能帮助到你!