Mi aplicación usa la API de Firebase para la autenticación de usuarios y guarda el estado de inicio de sesión como un valor booleano en un estado de Vuex.
Cuando el usuario inicia sesión, configuro el estado de inicio de sesión y visualizo condicionalmente el botón Iniciar/Cerrar sesión en consecuencia.
Pero cuando se actualiza la página, el estado de la aplicación vue se pierde y se restablece a los valores predeterminados
Esto causa un problema, ya que incluso cuando el usuario inicia sesión y la página se actualiza, el estado de inicio de sesión vuelve a ser falso y se muestra el botón de inicio de sesión en lugar del botón de cierre de sesión aunque el usuario permanezca conectado...
¿Qué debo hacer para evitar este comportamiento?
¿Debería usar cookies ? O si hay alguna otra solución mejor disponible...
Este es un caso de uso conocido. Hay diferentes soluciones.
Por ejemplo, uno puede usar vuex-persistedstate . Este es un complemento para que vuex maneje y almacene el estado entre las actualizaciones de la página.
Código de muestra:
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 }) }) ] })Lo que hacemos aquí es simple:
js-cookiegetState intentamos cargar el estado guardado de las CookiessetState guardamos nuestro estado en CookiesDocumentos e instrucciones de instalación: https://www.npmjs.com/package/vuex-persistedstate
Al crear su estado VueX, guárdelo en el almacenamiento de la sesión con el complemento vuex-persistedstate . De esta forma, la información se perderá cuando se cierre el navegador. Evite el uso de cookies ya que estos valores viajarán entre el cliente y el servidor.
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: { //.... } }); Utilice sessionStorage.clear(); cuando el usuario cierra sesión manualmente.
EDITAR: tenga en cuenta que si su tienda tiene valores que no son intrínsecamente tipos de cadena (por ejemplo, fechas), su aplicación puede fallar o el comportamiento puede cambiar porque el proceso de serialización/deserialización convertirá estos valores en cadenas.
El estado de Vuex se mantiene en la memoria. La carga de la página eliminará este estado actual. Es por eso que el estado no persiste al recargar.
Pero el vuex-persistedstate resuelve este problema
npm install --save vuex-persistedstateAhora importa esto a la tienda.
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()] }); Funcionó perfectamente con una sola línea de código: plugins: [createPersistedState()]