tengo en vuejs un componente Nav, para la barra de navegacion del top, este es el componente:
<template>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<button id="btn_logout" v-if="isAuth" @click="logout" to="/logout">Cerrar Sesión</button>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
name: 'Nav',
methods: {
...mapMutations(['logout'])
},
computed:{
...mapGetters(['isAuth'])
}
}
</script>
El tema es que quiero que el boton de cerrar sesion salga solo cuando tengo en el localstorage el token auth , cuando le doy a logout me elimina el localstorage bien y todo, pero no es ractivo, es decir, tengo que refrescar la pagina para que checkee que ya no esta, en lugar de hacerlo automaticamente.
Para hacer todo esto, si os fijais tengo dos funciones : logout y isAuth . Forman parte de mi store (vuex) :
Mi store.js:
import { createStore } from 'vuex'
import router from '@/router/index'
export default createStore({
state: {
},
mutations: {
logout(state){
console.log('store - logout')
localStorage.clear('auth');
router.push('/login');
},
setAuth(state,authToken){
console.log('im store !!');
localStorage.setItem('auth',authToken);
},
},
actions: {
},
modules: {
},
getters:{
isAuth(){
return localStorage.getItem('auth');
}
}
})
Estoy con el debugger de vuejs. Y cada vez que hago logout el token de localstorage parece que desaparece bien. Pero esto:
Que deberia de estar siendo reactivo, y mostrarse segun devuelve tru o false el getter de mi vuex (que checkea el localstorage) no lo esta siendo. Solo funciona al recargar la pagina que es cuando lo lee de nuevo.
El sistema de logeo es el siguiente:
<template>
<div class="">
<form
id="login"
@submit.prevent="login"
method="post"
>
<input type="text" v-model="user.name">
<br>
<input type="password" v-model="user.password">
<br>
<button>Iniciar Sesion</button>
</form>
</div>
</template>
<script>import axios from "axios";
import { RouterLink } from "vue-router";
import { mapMutations } from "vuex";
export default {
name: 'Login',
props: {
},
data() {
return {
user:{
name:'',
password:''
}
}
},
mounted() {
console.log('store');
console.log(this.$store);
},
methods: {
...mapMutations(['setAuth']),
login(){
let authToken = Math.floor(Math.random() * (9999999 - 1000000)) + 1000000;
this.setAuth(authToken);
this.$router.push('/home')
// axios.post('/login', this.user)
// .then((res) => {
// //Perform Success Action
// })
// .catch((error) => {
// // error.response.status Check status code
// }).finally(() => {
// //Perform action in always
// });
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>