nuffyweb
@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');
        },

И получается, когда пользователь залогинен и мы перезагружаем страницу, то сначала показывается первое меню, а спустя несколько секунд то которое нужно, как это можно пофиксить?
Весь код посмотреть и пощупать можно тут
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ответы на вопрос 1
@megakor
PHP погроммист | Vue авантюрист | ru.sarvarov.dev
1.Сделать во Vuex в модуле auth свойство состояния loading.
После загрузки события ставить в false.
Меню не выводить пока $store.state.loading === true.
2. Еще можно сделать, что если в куках есть какой-то токен то выводить меню авторизованного юзера.
Если вывелось такое меню и токен окажется недействительным то сбрасывает меню или делает редирект на страницу авторизации.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
06 мар. 2021, в 02:23
120000 руб./за проект
06 мар. 2021, в 00:29
500 руб./за проект
05 мар. 2021, в 23:28
1200 руб./за проект