Question

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

通过Express.js会话对我的API进行身份验证。通过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吗？

Answer 1

我解决这个问题的方式与安迪·塔顿（Andy Taton）在回答中所表达的方式相同。它是这样的：

客户端：

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身份验证的有效示例。希望对您有帮助！

Answer 2

这是对我有用的解决方案。

由于前端不认识用户，但是后端可以通过cookie的存在和护照创建的属性request.user来区分用户是谁，因此我们必须询问后端。 >

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

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

反应前端+ Express.js会话

2 个答案: