After Login my menu has to change "connexion" to "deconnexion" but it not happening.
I have :
LoginPage.vue :
<fg-input addon-left-icon="now-ui-icons ui-1_email-85"
v-model="email"
placeholder="Email">
</fg-input>
<fg-input addon-left-icon="now-ui-icons text_caps-small"
v-model="password"
placeholder="Mot de passe">
</fg-input>
<template slot="raw-content">
<div class="card-footer text-center">
<a href="#pablo" class="btn btn-primary btn-round btn-lg btn-block"
@click.prevent="login">Se connecter</a>
</div>
....
<script>
....
methods: {
...mapActions(['loginUser']),
login(){
if (this.email.length > 0 && this.password.length > 0) {
this.loginUser({
email: this.email,
password: this.password,
})
} else {
this.password = ""
return alert("Passwords do not match")
}
....
Store.js :
state:{
user: {},
token : "",
loggedIn: false
},
getters:{
user : state =>{ return state.user },
token : state =>{ return state.token },
},
mutations:{
SET_USER:(state,newValue)=>{
return state.user = newValue
},
SET_TOKEN:(state,newValue)=>{
return state.token = newValue
},
SET_LOGGEDIN:(state, newValue)=>{
return state.loggedIn = newValue
},
},
actions:{
loginUser({commit,state}, payload){
axios.post("http://127.0.0.1:8000/api/auth/login", payload)
.then(response => {
commit('SET_TOKEN', JSON.stringify(response.data.accessToken))
commit('SET_LOGGEDIN', true)
router.push({name:'accueil'})
})
.catch(error => {
console.log(error);
});
},
StarterNavbar.vue :
<template v-if="loggedIn" >
<li class="nav-item nav-link" style="cursor: pointer;" @click.prevent="logoutUser">
Deconnexion
</li>
</template>
<template v-else>
<router-link class="nav-item nav-link" to="/register">
Inscription
</router-link>
<router-link class="nav-item nav-link" to="/login">
Connexion
</router-link>
</template>
....
computed:{
...mapState(['loggedIn', 'token']),
},
After Login action the router push to home page (Accueil.vue). In this component I trace 'loggedIn' and 'token' properties of Store.
mounted() {
console.log('token',this.token) // exist
console.log('loggedIn', this.loggedIn) // true
But I don't see the changes in my StarterNavbar : Connexion is displayed instead Deconnexion. Why my menu is changing just after reload of page?
In Vue-devtools after Login action:
switch to Components :
vuex bindings
loggedIn: true
token: ""eyJ0eXAiOiJKV1QiLCJ...""
switch to Vuex:
mutation
payload:true
type:"SET_LOGGEDIN"
but STATE is grey, params have old value... and on bottom the following is written:
Recording state on demande.... displaying last received state and button "Load state". If I click on it State become black and params have new values.. the page not updated. What does it mean and what happens?