vue.js - props - Estado de Vuex en la actualización de la página

vue props default

Question

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

Cuando el usuario inicia sesión, configuro el estado de inicio de sesión y visualizo condicionalmente el botón Iniciar sesión / Cerrar sesión en consecuencia.

Pero cuando la página se actualiza, 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 ha iniciado 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 permanece conectado ...

¿Qué debo hacer para prevenir este comportamiento?

¿Debo usar cookies o hay otra solución mejor disponible ...

-

Answer 1

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, que incluye expirationTime y refreshToken.
Por lo tanto, usaré el enlace Vue creado y la API de Firebase para verificar el estado de inicio de sesión.
Si el token expiró, la API actualizará el token por nosotros.
Por lo tanto, 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.'');
            }
        });
    },
});

Answer 2

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:

1. necesitas instalar js-cookie
2. en getState intentamos cargar el estado guardado de Cookies
3. en setState guardamos nuestro estado en Cookies

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

Answer 3

He resuelto esto restableciendo mis encabezados cada vez que vuelvo a cargar también para buscar datos de usuario, no sé qué 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()
                            })
                    }
                }
            }
        })

})

Answer 4

poner en estado:

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

ponerse mutaciones:

localStorage.setItem("producer",JSON.stringify(state.producer)) // OR
localStorage.removeItem("producers");

funciona bien para mi!