Данные приходят до того как пройдёт axios запрос
Пишу сайт в связке Laravel+Vue и использую JWT токены.
Хочу, чтобы при авторизации пользователь в личном кабинете видел свои данные. При авторизации всё хорошо, их видно, но токен-то не бесконечный, а 60 минут действует.
Когда токен истекает, то идёт запрос /refresh и токен меняется в локалсторадже, и идёт повторный axios-запрос /me, но проблема в том, что данные я не увижу, пока не перезагружу страницу.
Просто я вызываю этот action в mounted, и пока эти запросы шли, в "user" записались данные позже, чем вызвался mounted.
Как можно это исправить, чтобы всё реактивно было?
Файл app.js:
const store = createStore({
state: {
user: [],
isLoadingUser: false,
},
mutations: {
GET_INFO_USER: (state, value) => {
state.user = value
state.isLoadingUser = true
},
SET_TOKEN_REFRESHED: (state, value) => {
state.tokenRefreshed = value
}
},
actions: {
getUserInfo: ({commit, state}) => {
const token = localStorage.getItem('access_token');
if (token) {
axios.post("http://market/api/auth/me", {}, {
headers: {
'authorization': `Bearer ${token}`
}
})
.then(res => {
commit('SET_IS_LOGED_IN', true);
commit('GET_INFO_USER', res.data);
})
.catch(err => {
if (err.response.data.message === 'Unauthenticated.') {
commit('SET_IS_LOGED_IN', false);
axios.post('http://market/api/auth/refresh', {}, {
headers: {
'authorization': `Bearer ${token}`
}
})
.then(res => {
localStorage.setItem('access_token', res.data.access_token);
axios.post("http://market/api/auth/me", {}, {
headers: {
'authorization': `Bearer ${res.data.access_token}`
}
})
.then(res => {
commit('SET_IS_LOGED_IN', true); // сохраняем данные в state
commit('GET_INFO_USER', res.data);
console.log(state.user);
})
.catch(err => {
commit('SET_IS_LOGED_IN', false);
})
})
.catch(err => {
commit('SET_IS_LOGED_IN', false);
})
}
});
} else {
commit('SET_IS_LOGED_IN', false);
}
}
Код MyAccount.Vue:
<template>
<h4 v-if="user"><span>Привет {{user.login}}</span></h4>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "My-Account",
computed: {
...mapState(['user'])
},
mounted() {
this.$store.dispatch('getUserInfo')
this.getUser()
}
}
</script>