Estou tentando fazero login em uma aplicação que utiliza o laravel como back/api e o front com vue/vuex/vue-router, porém ao receber o token eu não consigo manter o estado na store após atualizar a página, o estado só continua com o usuário se eu trocar de página via router-link. O componente Login.vue está assim:
<template>
...
</template>
<script>
export default {
data() {
return() {
form: {
email: '',
password: '',
}
}
},
computed: {
stateUser() {
return this.$store.state.user
},
getUser() {
return this.$store.getters.getUser
}
},
created() {
console.log("USUARIO ", this.getUser)
},
methods: {
doLogin(){
axios.post('/api/login', this.form)
.then(response => {
// efetua o login caso a api retorne o token
if (response.data.token) {
sessionStorage.setItem('user', JSON.stringify(response.data))
this.$store.commit('SET_USER')
console.log(this.getUser)
})
.catch(error => {
console.error(error)
});
}
}
<script>
Todo esse processo está funcionando, ao verificar as sessões ativas no navegador ela está lá criada normalmente
O problema ocorre quando atualizo a página, nesse momento a minha state.user volta a ser false, ela acaba perdendo os dados do estado.. segue a minha store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
user: false,
}
const mutations = {
SET_USER (state) {
const userSession = JSON.parse(sessionStorage.getItem('user'));
if (userSession) {
state.user = {
id: userSession.id,
name: userSession.name,
email: userSession.email,
token: userSession.token,
}
}
},
UNSET_USER(state) {
sessionStorage.clear();
state.user = false;
}
}
const getters = {
getUser(state) {
return state.user;
}
}
export default new Vuex.Store({
state,
mutations,
getters,
})
Estou utilizando o passport do laravel e está retornando o token normalmente. O problema está mesmo no momento em que acesso outra página via url ou atualizo a página fazendo com que a state não mantenha os dados
Se alguém puder indicar algum tutorial ou referência para esse problema
Muito obrigado