Überprüfen Sie, ob Axios ein Sitzungscookie hat

Question

Ich implementiere einen Navigationsschutz für meine Vue.js-Anwendung und überprüfe, ob der Benutzer angemeldet ist. Ich denke, der beste Weg wäre, Axios zu fragen, ob er ein Sitzungscookie hat oder nicht. Etwas wie das:

router.beforeEach((to, from, next) => {
  if (Vue.axios.hasSessionCookie())
    next()
  else
    next(false);
}

Außer natürlich hasSessionCookie()nicht vorhanden, und ich sehe so etwas nicht in den Dokumenten. Gibt es einen Weg, vielleicht durch eine Erweiterung?

Ja, ich weiß, dass ich den Anmeldestatus im VueX-Speicher speichern kann. Ich halte das nicht für eine gute Idee, da der Status zurückgesetzt würde, wenn der Benutzer in seiner unendlichen Weisheit die Seite aktualisiert und damit die Anwendung zurückgesetzt hätte. Eine andere Lösung, an die ich denke, ist ein Backend-Endpunkt, an dem die App "fragen" kann, ob sie angemeldet ist. Aber das ist auch ziemlich lahm.

Answer 1

Vielen Dank für alle Tipps. Die richtige Lösung war die folgende:

• VueX speichert den Anmeldestatus (einfach ein Boolesches Flag), den der Navigationsschutz überprüft
• Wenn sich der Benutzer anmeldet oder abmeldet, setze ich das Flag
• Wenn die App gestartet wird, rufe ich die /checkloginRoute auf dem Server auf, bevor die Vue-Instanz erstellt wird. Dies gibt einfach einen 200- oder 401-Statuscode zurück, je nachdem, ob der Benutzer eine gültige Sitzung hat oder nicht. Dann setze ich das VueX-Flag entsprechend. Auf diese Weise kann der Benutzer den Browser aktualisieren, VueX weiß jedoch weiterhin, ob er angemeldet ist oder nicht.
• Außerdem habe ich einen Axios Interceptor hinzugefügt, um 401 Fehler zu erkennen. Wenn es eine gibt, bedeutet dies, dass die Sitzung abgelaufen ist. Anschließend setzt es das VueX-Flag auf falseund leitet den Benutzer zur Anmeldeseite weiter.

Ich habe einen Artikel in meinem Medium-Blog mit Details und Ausschnitten geschrieben, wenn es jemanden interessiert. https://medium.com/developer-rants/session-management-between-express-and-axios

Answer 2

Da es sich um ein serverseitiges Cookie handelt, können Sie es nicht in clientseitigem Javascript überprüfen. Sie müssen eine HTTP-Anforderung an Ihren Express-Server senden, um zu überprüfen, ob eine Sitzung vorhanden ist. Erstellen Sie auf Ihrem Express-Server eine einfache Route wie folgt:

app.get("/checkcookie", function(req,res) {
    if (req.session.yourSessionVariableName) {
        res.status(204).send();
    } else {
        res.status(401).send();
    }
});

Überprüfen Sie dann Ihren Vue-Navigationsschutz:

router.beforeEach(async (to, from, next) => {
  const response = await axios.get("http://yourexpressbackend.com/checkcookie");
  if (response.status === 204)
    next()
  else
    next(false);
}

Answer 3

Sie gehen in die richtige Richtung, aber axios ist ein HTTP-Client und hat nichts mit Cookies zu tun. Es kümmert sich auch nicht um Cookies oder Speicher. Sie müssen also ein Paket wie Vue-Cookies verwenden , um Cookies zu setzen und zu erhalten.

Answer 4

Tamás Polgár, Sie haben genau die Herausforderung dokumentiert, die ich mit Vue hatte. Was tun mit der Anmeldung, wenn ein unerwartetes Browserereignis auftritt und der Speicher verloren geht?

Der Vue-Laden:

Der Vue-Speicher soll ein geeigneter Ort für ein SPA sein, um ein solches Flag zu speichern (angemeldet oder nicht angemeldet). Der Speicher wird jedoch mit jeder Vue-Instanz vollständig gelöscht und wiederhergestellt, was ein neues Browserfenster / eine neue Registerkarte bedeutet. Aktualisierung oder ein anderes unerwartetes Ereignis, das eine Browseraktualisierung auslöst.

Ihr Ansatz beschreibt daher einen zusätzlichen Back-End-Aufruf, um den Status schnell zu überprüfen. Dies ist eine legitime und funktionsfähige Lösung, IMO.

Es gibt auch zwei weitere mögliche Lösungen, von denen ich die zweite in meinem eigenen SPA implementiert habe:

Zwei weitere Lösungen

1) Berühren Sie Ihren Backend-Code überhaupt nicht. Verwenden Sie Vue-Cookies , um den Client-Browser ein Cookie setzen zu lassen, sobald eine Anmeldung eingerichtet wurde (dies wäre völlig unabhängig von dem Nur-http-Cookie, das der Back-End-API-Server benötigt).

Dieses Cookie sollte nach einer Browseraktualisierung noch vorhanden sein. Ich habe diesen Ansatz jedoch nicht verwendet (oder ausprobiert), da ich nicht daran herumspielen wollte, mein Front-End zu ändern, um jedes Mal, wenn ich den Anmeldestatus überprüfen möchte, ein lokales Cookie zu überprüfen.

Der Front-End-Code könnte dieses Cookie verwenden, um herauszufinden, ob die Person noch angemeldet ist oder nicht.

2) Ein anderer, separater Ansatz besteht darin, die normale Back-End-API-Prüfung für die Authentifizierung nur für den Controller dieser bestimmten Route , jedoch nicht für eine andere Route, kurzzuschließen .

So würde ein Kurzschluss im Backend funktionieren:

Lassen Sie im Fall der Controller-Methode dieser bestimmten Route zuerst prüfen, ob der Benutzer in der Anforderung vorhanden ist, und geben Sie dann eine 200 zurück, jedoch mit dem Status "false" oder einer anderen Variablen, die ebenfalls in der Erfolgsantwort angezeigt wird.

Es ist nicht intuitiv, aber dies gibt dem Front-End-Axios-Aufruf etwas anderes als nur eine Standardfehlerantwort.

ANMERKUNG : Ich nenne es einen "Kurzschluss", denn wenn die Controller-Methode der Back-End-API-Route viel Code enthält, wird durch diese Überprüfung als Erstes der kostspielige Teil des Aufrufs vermieden.

Dieser Ansatz funktioniert perfekt für meine Anforderungen und erfordert keinen neuen oder sekundären API-Aufruf.