Vuex-Status bei Seitenaktualisierung

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 ...

- -

Dies ist ein bekannter Anwendungsfall. Es gibt verschiedene Lösungen.

Zum Beispiel kann man verwenden vuex-persistedstate. Dies ist ein Plugin vuexzum Behandeln und Speichern des Status zwischen Seitenaktualisierungen.

Beispielcode:

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
    })
  ]
})

Was wir hier machen, ist einfach:

1. Sie müssen installieren js-cookie
2. am getStateversuchen wir den gespeicherten Zustand von zu ladenCookies
3. auf setStateretten wir unseren Staat zuCookies

Dokumente und Installationsanweisungen: https://www.npmjs.com/package/vuex-persistedstate

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.

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export default new Vuex.Store({
    plugins: [createPersistedState({
        storage: window.sessionStorage,
    })],
    state: {
        //....
    }
});

Verwenden Sie diese sessionStorage.clear();Option, wenn sich der Benutzer manuell abmeldet.

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.

new Vue({
    el: '#app',
    created() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                log('User is logined');
                // update data or vuex state
            } else {
                log('User is not logged in.');
            }
        });
    },
});

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-persistedstatePlugin löst dieses Problem

npm install --save vuex-persistedstate

Importieren Sie dies nun in den Store.

import Vue from 'vue'
import Vuex from 'vuex'
import account from './modules/account'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    account,
  },
  plugins: [createPersistedState()]
});

Es funktionierte perfekt mit einer einzigen Codezeile: plugins: [createPersistedState()]

Zustand aufsetzen:

producer: JSON.parse(localStorage.getItem('producer') || "{}")

Mutationen anziehen:

localStorage.setItem("producer",JSON.stringify(state.producer)) // OR
localStorage.removeItem("producers");

funktioniert gut für mich!

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 ...

new Vue({
    el: 'vue',
    render: h => h(VueBox),
    router,
    store,

    computed: {
        tokenJWT () {
            return this.$store.getters.tokenCheck
        },
    },


    created() {
        this.setAuth()

    },

    methods:
        Object.assign({}, mapActions(['setUser']), {

            setAuth(){
                if (this.tokenJWT) {
                    if (this.tokenJWT === 'expired') {
                        this.$store.dispatch('destroyAuth')
                        this.$store.dispatch('openModal')
                        this.$store.dispatch('setElModal', 'form-login')

                    } else {
                        window.axios.defaults.headers.common = {
                            'Accept': 'application/json',
                            'Authorization': 'Bearer ' + this.tokenJWT
                        }
                        axios.get( api.domain + api.authApi )
                            .then(res => {
                                if (res.status == 200) {
                                    this.setUser( res.data.user )
                                }
                            })
                            .catch( errors => {
                                console.log(errors)
                                this.destroyAuth()
                            })
                    }
                }
            }
        })

})