Mi aplicación utiliza la API Firebase para la autenticación de 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/cierre de 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 se establece de nuevo en false y el botón de inicio de sesión se muestra en lugar del botón de cierre de sesión a pesar de que el usuario permanece conectado....
**¿Qué debo hacer para evitar este comportamiento?
¿Debo usar cookies? O cualquier otra solución mejor está disponible ...
Se trata de un caso de uso conocido. Existen diferentes soluciones.
Por ejemplo, se puede utilizar vuex-persistedstate
. Este es un plugin para vuex
para manejar y almacenar el estado entre actualizaciones de página.
Código de ejemplo:
importa { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
const store = new Store({
// ...
plugins: [
createPersistedState({
getState: (clave) => Cookies.getJSON(clave),
setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
})
]
})
Lo que hacemos aquí es simple:
js-cookie
getState
intentamos cargar el estado guardado en Cookies
.setState
guardamos nuestro estado en Cookies
.Documentación e instrucciones de instalación: https://www.npmjs.com/package/vuex-persistedstate
Creo que el uso de cookies/localStorage para guardar el estado de inicio de sesión podría causar algún error en alguna situación.
Firebase ya registra la información de inicio de sesión en localStorage para nosotros incluyen 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 ha caducado, la api refrescará el token para nosotros.
Así que podemos asegurarnos de que la visualización del estado de inicio de sesión en nuestra aplicación es 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.');
}
});
},
});
I'he resuelto esto mediante el restablecimiento de mis cabeceras cada vez que vuelva a cargar también obtener datos de usuario, I don't sabe lo 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()
})
}
}
}
})
})