Estado de Vuex en la actualización de la página

Mi aplicación utiliza la API Firebase para la autenticación del usuario, guardando el estado de inicio de sesión como un valor booleano en un estado Vuex.

Cuando el usuario inicia sesión, establezco el estado de inicio de sesión y muestro condicionalmente el botón de Inicio de sesión/Cierre de sesión en consecuencia.

Pero cuando se actualiza la página, el estado de la aplicación vue se pierde y se restablece al valor predeterminado

Esto causa un problema ya que incluso cuando el usuario está conectado y la página se actualiza, el estado de inicio de sesión se vuelve a establecer false 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 prevenir este comportamiento

Debo usar cookies O cualquier otra solución mejor está disponible...

    -
Author: jaysoifer, 2017-03-26
Source

3 answers

Este es un caso de uso conocido. Hay diferentes soluciones.

Por ejemplo, se puede utilizar vuex-persistedstate. Este es un plugin para vuex para manejar y almacenar el estado entre las actualizaciones de página.

Código de ejemplo: 

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:

  1. necesita instalar js-cookie
  2. en getState tratamos de cargar el estado guardado de Cookies
  3. en setState salvamos nuestro estado a Cookies

Documentos e instrucciones de instalación: https://www.npmjs.com/package/vuex-persistedstate

 37
Author: sobolevn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-26 10:34:30

Creo que usar cookies/localStorage para guardar el estado de inicio de sesión puede causar algún error en alguna situación.
Firebase ya registra información de inicio de sesión en localStorage para nosotros incluye expirationTime y refreshToken.
Por lo tanto, voy a utilizar Vue creado gancho y Firebase api para comprobar el estado de inicio de sesión.
Si el token expiró, la api actualizará el token para nosotros.
Así que podemos asegurarnos de que la visualización del estado de inicio de sesión en nuestra aplicación sea igual a 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.');
            }
        });
    },
});
 3
Author: oahehc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-23 02:56:46

He resuelto esto restableciendo mis encabezados cada vez que vuelvo a cargar también recuperar datos de usuario, no se que es mejor ...

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

})
 0
Author: Alenn G'Kar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-27 16:23:22