webentwicklung-frage-antwort-db.com.de

Vuex-Status für die Seitenaktualisierung

Meine App verwendet die Firebase-API für die Benutzerauthentifizierung. Der Anmeldestatus wird als boolescher Wert in einem Vuex-Status gespeichert.

Wenn sich der Benutzer anmeldet, stelle ich den login-Status ein und zeige die Schaltfläche Login/Logout entsprechend an.

Wenn die Seite jedoch aktualisiert wird, geht der Status der Vue-App verloren und wird auf den Standard zurückgesetzt

Dies führt zu einem Problem, da selbst wenn der Benutzer angemeldet ist und die Seite aktualisiert wird, der login-Status wieder auf false gesetzt wird und die Login-Schaltfläche anstelle der Abmelden-Schaltfläche angezeigt wird, obwohl der Benutzer angemeldet bleibt ....

Was soll ich tun, um dieses Verhalten zu verhindern

Soll ich cookies Oder eine andere bessere Lösung verwenden?.

    -
vue.jsvuejs2statevuex
33
boomerboy

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

Zum Beispiel kann man vuex-persistedstate verwenden. Dies ist ein Plugin für vuex, um den Status zwischen Seitenaktualisierungen zu behandeln und zu speichern.

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 js-cookie installieren.
  2. auf getState versuchen wir, den gespeicherten Status von Cookies zu laden
  3. auf setState speichern wir unseren Zustand in Cookies

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

46
sobolevn

Ich denke, die Verwendung von Cookies/localStorage zum Speichern des Anmeldestatus kann in einigen Situationen zu Fehlern führen.
Firebase zeichnet bereits Anmeldeinformationen bei localStorage auf, darunter expirationTime und refreshToken.
Deshalb werde ich den von Vue erstellten Hook und das Firebase-API verwenden, um den Login-Status zu überprüfen.
Wenn das Token abgelaufen ist, wird das API für uns aktualisiert.
Wir können also sicherstellen, dass der Login-Status 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.');
            }
        });
    },
});
5
oahehc

Ich habe dieses Problem gelöst, indem ich meine Kopfzeilen jedes Mal zurücksetzte, wenn ich die Daten erneut abrenne.

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()
                            })
                    }
                }
            }
        })

})
1
Alenn G'Kar

auf Zustand setzen:

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

mutationen anlegen:

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

funktioniert gut für mich!

0
Leonardo Filipe