Meine App verwendet die Firebase-API für die Benutzerauthentifizierung und speichert den Anmeldestatus als booleschen Wert in einem Vuex-Status.
Wenn sich der Benutzer anmeldet, setze ich den Anmeldestatus und zeige die Schaltfläche Anmelden / Abmelden entsprechend an.
Wenn die Seite aktualisiert wird, geht der Status der Vue-App verloren und wird auf die Standardeinstellungen zurückgesetzt
Dies verursacht ein Problem, da selbst wenn der Benutzer angemeldet und die Seite aktualisiert ist, der Anmeldestatus auf false zurückgesetzt wird und die Anmeldeschaltfläche anstelle der Abmeldeschaltfläche angezeigt wird, obwohl der Benutzer angemeldet bleibt.
Was soll ich tun, um dieses Verhalten zu verhindern?
Soll ich Cookies verwenden oder ist eine andere bessere Lösung verfügbar ...
-
- -
Antworten:
Dies ist ein bekannter Anwendungsfall. Es gibt verschiedene Lösungen.
Zum Beispiel kann man verwenden
vuex-persistedstate
. Dies ist ein Pluginvuex
zum Behandeln und Speichern des Status zwischen Seitenaktualisierungen.Beispielcode:
Was wir hier machen, ist einfach:
js-cookie
getState
versuchen wir den gespeicherten Zustand von zu ladenCookies
setState
retten wir unseren Staat zuCookies
Dokumente und Installationsanweisungen: https://www.npmjs.com/package/vuex-persistedstate
quelle
Speichern Sie Ihren VueX-Status beim Erstellen im Sitzungsspeicher mit dem Plugin vuex-persistedstate . Auf diese Weise gehen die Informationen verloren, wenn der Browser geschlossen wird. Vermeiden Sie die Verwendung von Cookies, da diese Werte zwischen Client und Server übertragen werden.
Verwenden Sie diese
sessionStorage.clear();
Option, wenn sich der Benutzer manuell abmeldet.quelle
vuex-persistedstate.es.js?0e44:1 Uncaught (in promise) TypeError: Converting circular structure to JSON
Ich denke, die Verwendung von Cookies / localStorage zum Speichern des Anmeldestatus kann in bestimmten Situationen zu Fehlern führen.
Firebase zeichnet bereits Anmeldeinformationen bei localStorage auf, einschließlich expirationTime und refreshToken.
Daher werde ich den von Vue erstellten Hook und die Firebase-API verwenden, um den Anmeldestatus zu überprüfen.
Wenn das Token abgelaufen ist, aktualisiert die API das Token für uns.
So können wir sicherstellen, dass die Anmeldestatusanzeige in unserer App Firebase entspricht.
quelle
Der Vuex-Status wird gespeichert. Durch das Laden der Seite wird dieser aktuelle Status gelöscht. Aus diesem Grund bleibt der Status beim erneuten Laden nicht bestehen.
Aber das
vuex-persistedstate
Plugin löst dieses ProblemImportieren Sie dies nun in den Store.
Es funktionierte perfekt mit einer einzigen Codezeile:
plugins: [createPersistedState()]
quelle
Zustand aufsetzen:
Mutationen anziehen:
funktioniert gut für mich!
quelle
Ich habe dieses Problem gelöst, indem ich meine Header jedes Mal zurückgesetzt habe, wenn ich neu lade und auch Benutzerdaten abrufe. Ich weiß nicht, was besser ist ...
quelle