Mon application utilise l'API Firebase pour l'authentification des utilisateurs, en enregistrant l'état de connexion sous forme de valeur booléenne dans un état Vuex.
Lorsque l'utilisateur se connecte, je règle l' état de connexion et j'affiche conditionnellement 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é par défaut
Cela pose un problème car même lorsque l'utilisateur est connecté et que la page est actualisée, l' état de connexion est remis à false et le bouton de connexion est affiché à la place du bouton de déconnexion même si l'utilisateur reste connecté ...
Que dois-je faire pour éviter ce comportement
Dois-je utiliser des cookies Ou toute autre meilleure solution est disponible ...
-
-
Réponses:
Il s'agit d'un cas d'utilisation connu. Il existe différentes solutions.
Par exemple, on peut utiliser
vuex-persistedstate
. Il s'agit d'un plugin pourvuex
gérer et stocker l'état entre les actualisations de la 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:
js-cookie
getState
nous essayons de charger un état sauvéCookies
setState
nous sauvons notre état pourCookies
Documents et instructions d'installation: https://www.npmjs.com/package/vuex-persistedstate
la source
Lors de la création de votre état VueX, enregistrez-le dans le stockage de session à l'aide du plugin vuex-persistedstate . De cette manière, les informations seront perdues lors de la fermeture du navigateur. Évitez d'utiliser des cookies car ces valeurs circuleront 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: { //.... } });
À utiliser
sessionStorage.clear();
lorsque l'utilisateur se déconnecte manuellement.la source
vuex-persistedstate.es.js?0e44:1 Uncaught (in promise) TypeError: Converting circular structure to JSON
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èmeImportez maintenant ceci dans le magasin.
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 fonctionnait parfaitement avec une seule ligne de code:
plugins: [createPersistedState()]
la source
Je pense que l'utilisation de cookies / localStorage pour enregistrer l'état de connexion peut provoquer une erreur dans certaines situations.
Firebase enregistre déjà les informations de connexion sur localStorage pour nous, notamment expirationTime et refreshToken.
Par conséquent, j'utiliserai le hook créé par Vue et l'API Firebase pour vérifier l'état de connexion.
Si le jeton a expiré, l'API actualisera le jeton pour nous.
Nous pouvons donc nous assurer que l'affichage de l'état de connexion 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.'); } }); }, });
la source
mettre en état:
producer: JSON.parse(localStorage.getItem('producer') || "{}")
mettre sur les mutations:
localStorage.setItem("producer",JSON.stringify(state.producer)) // OR localStorage.removeItem("producers");
fonctionne bien pour moi!
la source
J'ai résolu ce problème en réinitialisant mes en-têtes à chaque fois que je recharge également les données 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() }) } } } }) })
la source