React front-end + Sessions Express.js

Question

J'ai une API backend basée sur Express.js et un clientside basé sur React-Redux.

L'authentification à mon API est faite par les sessions Express.js. L'utilisateur se connecte avec Passport (OAuth2) et après cela, le cookie de l'utilisateur est enregistré dans la base de données connectée à son identifiant utilisateur. Ce cookie est également stocké dans le cookie du navigateur du client.

Si vous envoyez une requête à cette API, le serveur vérifie votre cookie avec la base de données et s'il est correct, il vous renvoie des données.

Cela fonctionnait bien quand je n'utilisais pas React, mais maintenant le clientside doit d'une manière ou d'une autre savoir que l'utilisateur est connecté même avant de faire une demande (lorsque l'application React est chargée).

Le cookie de session est enregistré même lorsque l'utilisateur n'est pas connecté, donc je suis perdu.

Comment faire ?

Image sur comment cela fonctionne : https://i.stack.imgur.com/6g0ei.png

RECHERCHE ADDITIONNELLE:

J'ai fait des recherches sur https://www.instagram.com/ par exemple... Ils utilisent un cookie de session... Si je supprime ce cookie, l'utilisateur se déconnecte, et lorsque j'utilise ce cookie dans Postman, je peux accéder à l'API. Mais je ne trouve aucune requête qui vérifie si l'utilisateur est connecté. L'application React le sait juste après la réception des données initiales du serveur. Peut-être qu'ils envoient cette information à React depuis le serveur ? Sans appeler l'API après le chargement de l'application ?

Answer 1

La façon dont j'ai résolu cela était la même que celle exprimée par Andy Taton dans sa réponse. Cela ressemble quelque peu à ceci :

Côté client :

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

Côté serveur :

  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: 'vous n'êtes pas connecté' })
    }
  })

Votre requête doit contenir credentials: "include" si vous utilisez fetch en ES6, ou withCredentials: true si vous utilisez axios.

Consultez cet exemple de code, il contient un exemple fonctionnel avec l'authentification Twitter. J'espère que cela vous aidera !

Answer 2

Voici quelque chose qui a fonctionné pour moi pour résoudre ce problème.

Étant donné que le frontend ne connaît pas l'utilisateur, mais que le backend peut identifier l'utilisateur grâce à la présence du cookie et à la propriété créée request.user du passeport, nous devons DEMANDER AU BACKEND qui est l'utilisateur.

Créez une route dans le backend, comme api/user. Elle cherche simplement le cookie, obtient l'utilisateur et renvoie ce json. S'il n'y a pas d'utilisateur, le serveur répond qu'il n'y a pas d'utilisateur. Peut-être pourrions-nous rediriger vers la connexion avec le passeport à ce moment-là, mais j'ai juste effectué une fenêtre.ouvrir(/auth/github) dans le frontend ici.

En résumé, le Frontend ne connaît pas l'utilisateur ? Demandez au backend.