Данные приходят до того как пройдёт 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>

Ответы (0 шт):