Реагировать на пользовательские сессии + Express.js

Question

У меня есть внутренний API, основанный на Express.js, и клиентская часть, основанная на React-Redux.

Аутентификация моего API выполняется сессиями Express.js. Вход пользователя в систему по паспорту (OAuth2) и после этого файл cookie пользователя сохраняется в базе данных, связанной с его идентификатором пользователя. Этот файл cookie также находится в хранилище файлов cookie браузеров клиента.

Если вы отправите следующий запрос этому API, сервер проверит ваш файл cookie с базой данных и, если он верный, ответит на ваши данные.

Это работало хорошо, когда я не использовал React, но теперь клиентская часть должна каким-то образом знать, что пользователь вошел в систему еще до того, как вы сделаете какой-то запрос (когда загружено приложение React).

Файл cookie сеанса сохраняется, даже если пользователь не зарегистрирован, поэтому я теряюсь.

Как это сделать?

Изображение о том, как это работает: https://i.stack.imgur.com/6g0ei.png

ДОПОЛНИТЕЛЬНЫЕ ИССЛЕДОВАНИЯ:

Я, например, расследовал https://www.instagram.com/ ... Они используют сессионный cookie ... Если я удаляю этот cookie, пользователь выходит из системы, также, когда я использую этот cookie в Postman, я могу получить 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' })
    }
  })

Ваш запрос должен содержать учетные данные: "include" при использовании ES6 fetch или withCredentials: true при использовании axios.

Проверьте этот пример кода , он содержит рабочий пример с аутентификацией Twitter.Надеюсь, это поможет!