Как и где правильно делать проверку залогинен ли юзер и хранение и его данных?

Question

[nuffyweb]

Добрый день!
1. Есть два меню в компоненте 'TheNavbar' : первое с сылками на регистрацию/авторизацию, второе когда пользователь залогинен

<template v-if="$currentUser">
                        <li class="nav-item">
                            <router-link
                                :to="{ name: 'TheSignin' }"
                                class="nav-link"
                            >
                                New Article
                            </router-link>
                        </li>
                        <li class="nav-item">
                            <router-link
                                :to="{ name: 'TheSignup' }"
                                class="nav-link"
                            >
                                Settings
                            </router-link>
                        </li>
                        <li class="nav-item">
                            <router-link
                                :to="{ name: 'TheSignup' }"
                                class="nav-link"
                            >{{ currentUser.username }}</router-link
                            >
                        </li>
                    </template>
                    <template v-else>
                        <li class="nav-item">
                            <router-link
                                :to="{ name: 'TheSignin' }"
                                class="nav-link"
                            >Sign in</router-link
                            >
                        </li>
                        <li class="nav-item">
                            <router-link
                                :to="{ name: 'TheSignup' }"
                                class="nav-link"
                            >Sign up</router-link
                            >
                        </li>

                    </template>

там же

computed: {
            ...mapState({
                currentUser: (state) => state.auth.currentUser,
            }),
        },

2. в App.vue деалется запрос:

created() {
            this.$store.dispatch('auth/getCurrentUser');
        },

И получается, когда пользователь залогинен и мы перезагружаем страницу, то сначала показывается первое меню, а спустя несколько секунд то которое нужно, как это можно пофиксить?
Весь код посмотреть и пощупать можно тут

Answer 1

[Роман Сарваров]

1.Сделать во Vuex в модуле auth свойство состояния loading.
После загрузки события ставить в false.
Меню не выводить пока $store.state.loading === true.
2. Еще можно сделать, что если в куках есть какой-то токен то выводить меню авторизованного юзера.
Если вывелось такое меню и токен окажется недействительным то сбрасывает меню или делает редирект на страницу авторизации.