É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

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

Par exemple, on peut utiliser vuex-persistedstate. Il s'agit d'un plugin pour vuex pour gérer et stocker l'état entre les rafraîchissements de page.

Code d'exemple:

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 sauvegardé depuis Cookies
3. sur setState nous sauvegardons notre état dans Cookies

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

Answer 2

Lors de la création de votre état VueX, enregistrez-le dans la session de stockage en utilisant le plugin vuex-persistedstate. De cette manière, les informations seront perdues lorsque le navigateur est fermé. Évitez d'utiliser les cookies car ces valeurs voyageront entre le client et le serveur.

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: {
        //....
    }
});

Utilisez sessionStorage.clear(); lorsque l'utilisateur se déconnecte manuellement.

REMARQUE : Notez que si votre magasin contient des valeurs qui ne sont pas intrinsèquement de type chaîne de caractères (par exemple des dates), votre application peut échouer ou le comportement peut changer car le processus de sérialisation/désérialisation convertira ces valeurs en chaînes de caractères.

Answer 3

L'état Vuex est conservé en mémoire. Le chargement de la page purgera cet état actuel. C'est pourquoi l'état ne persiste pas lors du rechargement.

Mais le vuex-persistedstate plugin résout ce problème

npm install --save vuex-persistedstate

Importez maintenant ceci dans le 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()]
});

Cela a fonctionné parfaitement avec une seule ligne de code : plugins: [createPersistedState()]

Answer 4

Je pense que l'utilisation de cookies/localStorage pour sauvegarder le statut de connexion pourrait causer des erreurs dans certaines situations.
Firebase enregistre déjà les informations de connexion dans localStorage pour nous, y compris expirationTime et refreshToken.
Par conséquent, j'utiliserai le hook créé de Vue et l'api Firebase pour vérifier le statut de connexion.
Si le jeton a expiré, l'api actualisera le jeton pour nous.
Ainsi, nous sommes sûrs que le statut de connexion affiché dans notre application est identique à celui de Firebase.

new Vue({
    el: '#app',
    created() {
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                log('L'utilisateur est connecté');
                // mettre à jour les données ou l'état de vuex
            } else {
                log('L'utilisateur n\'est pas connecté.');
            }
        });
    },
});

Answer 5

Mettre sur l'état :

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

mettre sur les mutations :

localStorage.setItem("producteur",JSON.stringify(state.producteur)) // OU
localStorage.removeItem("producteurs");

fonctionne bien pour moi !