Erstellen Sie React App + Express.js + Passport.js Login-Problem

Question

Also versuche ich Create React App mit Express.js auf dem Back-End zu verwenden. Ich führe die beiden auf verschiedenen Ports - Front-End ist auf 3000, Back-End ist auf 3001. Ich verwende Local Passport-Strategie für das Login-System. Und das Login-System funktioniert gut. Am Front-End habe ich ein Registrierungs-/Login-Formular, das eine Post-Anfrage an localhost sendet: 3001/register (oder login) und es registriert den Benutzer erfolgreich. Dann habe ich eine andere Route auf dem Back-End soll die Daten des angemeldeten Benutzers zurückgeben, wenn ein eingeloggter Benutzer vorhanden ist, oder ein Objekt mit einer Meldung "Nicht authentifiziert" zurückgeben.

app.get('/loggedUserInfo', function(req, res) { 
    if (req.user) { 
     console.log(req.user); 
     res.json(req.user); 
    } else { 
     console.log('not authenticated'); 
     res.json({'message': 'not authenticated'}); 
    } 
}); 

Jetzt, auf der Client-Seite, möchte ich die Navigationsleiste in Übereinstimmung mit der Antwort dieser Anfrage ändern. Wenn beispielsweise ein Benutzer angemeldet ist, möchte ich eine Navigationsleiste mit einer Schaltfläche zum Abmelden haben. Wenn ein Benutzer nicht angemeldet ist, möchte ich eine Navigationsleiste mit einer Anmeldung und einer Registrierungsschaltfläche haben. Also, in der Komponente Reaktion, ich habe diese einen entsprechenden Code:

componentDidMount() { 
    fetch('localhost:3001/loggedUserInfo') 
    .then(res => console.log(res.json())); 
} 

Dies soll den Zustand der Komponente ändern, aber es meldet sich die Antwort auf die Konsole, nur zum Testen. Und jedes Mal, selbst wenn der Benutzer angemeldet ist, gibt es das "nicht authentifizierte" Objekt zurück. Es ist wie der Benutzer nie angemeldet ist.

ABER, auf der anderen Seite, wenn ich zu localhost gehen: 3001/loggedUserInfo in meinem Browser, nachdem der Benutzer angemeldet ist, bekomme ich das erwartete Ergebnis. Es gibt die Benutzerinformationen zurück, die ich brauche.

Das hat mich wirklich gestört, ich kann nicht herausfinden, warum das passiert. Ich brauche die Daten auf der Client-Seite.

Falls jemand will meine app.js Datei, um zu sehen, hier ist der entsprechende Code (in dieser Reihenfolge), wo ich denke, ich habe alles enthalten, die es sein muss:

var cookieParser = require('cookie-parser'); 
var session = require('express-session'); 
var bodyParser = require('body-parser'); 
var cors = require('cors'); 

app.use(cors()); 
app.use(session({ 
    secret: 'secretKey', 
    resave: false, 
    saveUninitialized: true 
})); 
app.use(passport.initialize()); 
app.use(passport.session()); 

app.use(cookieParser()); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 

Answer 1

Erweiterung meines Kommentars:

Das Problem ist, dass Sie den Cookie in diesem Abruf nicht senden. So Ihr Backend erhält nie einen Cookie und für das Backend sind Sie nicht eingeloggt. Der Grund, warum es funktioniert, wenn Sie direkt auf die URL zugreifen, ist , dass der Browser es sendet (wenn Sie mit Postman versuchen sehen Sie es Arbeit)

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

Werfen Sie einen Blick auf den Abschnitt hier, mit dem Titel: Credentials mit einer Abrufanforderung gesendet.

fetch(url, { 
    credentials: 'include' 
})