web-dev-qa-db-fra.com

Etat de Vuex lors de l'actualisation de la page

Mon application utilise l'API Firebase pour l'authentification utilisateur, enregistrant le statut de connexion en tant que valeur booléenne dans un État Vuex.

Lorsque l'utilisateur se connecte, je définis l'état login et, de manière conditionnelle, affiche le bouton Connexion/Déconnexion en conséquence.

Mais lorsque la page est actualisée, l'état de l'application vue est perdu et réinitialisé

Cela pose un problème car même lorsque l'utilisateur est connecté et que la page est actualisée, l'état login est redéfini sur false et le bouton de connexion est affiché au lieu du bouton de déconnexion, même si l'utilisateur reste connecté ....

Que dois-je faire pour empêcher ce comportement

Dois-je utiliser cookies Ou toute autre solution meilleure est disponible ...

    -
vue.jsvuejs2statevuex
33
boomerboy

Ceci est un cas d'utilisation connu. Il y a différentes solutions.

Par exemple, on peut utiliser vuex-persistedstate . Ceci est un plugin pour vuex pour gérer et stocker l’état entre les rafraîchissements de page.

Exemple de code:

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

Ce que nous faisons ici est simple:

  1. vous devez installer js-cookie
  2. sur getState nous essayons de charger l'état enregistré de Cookies
  3. sur setState nous sauvons notre état à Cookies

Docs et instructions d'installation: https://www.npmjs.com/package/vuex-persistedstate

46
sobolevn

Je pense que l'utilisation de cookies/localStorage pour enregistrer le statut de connexion peut provoquer des erreurs dans certaines situations.
Firebase enregistre déjà les informations de connexion sur localStorage, notamment expirationTime et refreshToken.
Par conséquent, je vais utiliser le crochet créé avec Vue et l’API Firebase pour vérifier l’état de la connexion.
Si le jeton a expiré, l'API le rafraîchira pour nous.
Nous pouvons donc nous assurer que l’état de connexion affiché dans notre application est égal à Firebase.

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

J'ai résolu ce problème en réinitialisant mes en-têtes chaque fois que je re-charge, extrait également les données utilisateur. Je ne sais pas ce qui est préférable ...

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

mettre sur l'état:

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

mettre des mutations:

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

fonctionne bien pour moi!

0
Leonardo Filipe