时间戳

首页 > 解决方案 > React 前端 + Express.js 会话

javascript - React 前端 + Express.js 会话

问题描述

我有基于 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 吗？

标签： javascriptreactjsexpresssessioncookies

解决方案

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

客户端：

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，则为“include”，如果使用 axios，则withCredentials: true。

检查此代码示例，它包含一个使用 Twitter 身份验证的工作示例。希望能帮助到你！

推荐阅读