État de Vuex lors du rafraîchissement de la page

Question

Mon application utilise l'API Firebase pour l'authentification des utilisateurs, enregistrant le statut de connexion comme une valeur booléenne dans un état Vuex.

Lorsque l'utilisateur se connecte, je définis le statut de connexion et j'affiche conditionnellement le bouton Connexion/Déconnexion en conséquence.

Mais lorsque la page est rafraîchie, l'état de l'application vue est perdu et réinitialisé par défaut

Cela pose un problème car même lorsque l'utilisateur est connecté et que la page est rafraîchie, le statut de connexion est à nouveau dé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 des cookies Ou une autre meilleure solution est disponible...

-

Answer 1

J'ai résolu ce problème en réinitialisant mes en-têtes à chaque fois que je recharge aussi les données de l'utilisateur, je ne sais pas ce qui est mieux ...

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

})