Гуарды для роутов не понятно как работает?

Question

[Sergeyoffkey]

В главном компоненте APP после входа получаю из стора,и слежу за сессией пользователя которую получаю по UID из FIREBASE

Файл Апп:

computed: {
      isUserAuth () {
        return this.$store.getters.isUserAuth
      },
      userSaveSession() {
        return this.$store.dispatch('userSaveSession')
      },

      //for test check user UID
      userData () {
        return this.$store.getters.userData
      }
    },

    watch: {
      isUserAuth (value) {
        console.log('User auth is :' + value);
        if (value === true) {
          //this.$router.replace("/")
        }
      }

файл роутер индекс:

import Vue from 'vue'
import Router from 'vue-router'
import Store from '../store/index'


//Route components
import Home from '@/pages/Home'
import Register from '@/pages/user/Register'
import Login from '@/pages/user/Login'
import UserSettings from '@/pages/user/UserHome'
import UserAddNotice from '@/pages/user/user-components/UserAddNotice'
import UserEditNotice from '@/pages/user/user-components/UserEditNotice'
import UserNotices from '@/pages/user/user-components/UserNotices'
import UserReset from '@/pages/user/Resetpass'
import Single from '@/pages/Single'


Vue.use(Router);

// Routes
export default new Router({
    routes:
    [
      
        {
            path: '/usersettings',
            name: 'usersettings',
            component: UserSettings,
            beforeEnter: authGuard
        },
        {
            path: '/useraddnotice',
            name: 'useraddnotice',
            component: UserAddNotice,
            beforeEnter: authGuard
        },
        {
            path: '/usereditnotice',
            name: 'usereditnotice',
            component: UserEditNotice,
            beforeEnter: authGuard
        },
        {
            path: '/usernotices',
            name: 'usernotices',
            component: UserNotices,
            beforeEnter: authGuard
        },
    ],
    mode: 'history'
})

function authGuard(from, to, next) {
    console.log(Store.getters.isUserAuth)
    if(Store.getters.isUserAuth){
        next()
    } else {
        next('/login')
    }
}

На всех компонентах где есть гуарды на роутах - сессия слетает, идет переход на компонент логина и через пару секунд восстанавливается.

Помогите решить данную траблу, да и как воопще правильно писать эти гуарды на роуты?

Comments

[Alex Pospeliri]

Проблема в том, что ты пытаешься зайти на страницы до того как получаешь ответ от FB авторизован пользователь или нет, поэтому срабатывает редирект на логин, потом приходит ответ от FB, и дальше открывается страница.
как вариант в
main.js в created() {
асинхронно получай авторизованных пользователей...
}

[Sergeyoffkey]

Alex Pospeliri, В мэйн жс я по идее проверяю есть ли сессия пользователя...
Или что то не так ?

new Vue({
    router,
    store,
    render: h => h(App),
    created() {
        firebase.auth().onAuthStateChanged(user => {
           this.$store.dispatch('userSaveSession', user)
        });

        this.$store.dispatch('loadPosts')
    },
}).$mount('#app');

[Alex Pospeliri]

Sergeyoffkey,
Не совсем, в твоем примере. ты только отправляешь запрос,
чтобы нормально работало тебе нужно дождаться получения ответа,

created() {
        firebase.auth().onAuthStateChanged(async (user) => {
           try {
              await this.$store.dispatch('userSaveSession', user)
           } catch (err) {
           }
        });
        ...
    },

[Sergeyoffkey]

Alex Pospeliri, Зделал как описано выше, осталось как и было, НО! я попробовал обернуть условие в фуу Сеттаймаут с задержкой на 1 секунду и всё работает как нужно
Файл Роутер индекс:

function authGuard(from, to, next) {
    setTimeout(() => {
        if(Store.getters.isUserAuth){
            next()
        } else {
            next('/login')
        }
    }, 1000)
}

Насколько такой пример можно считать практичным ?? Является ли такой способ костылём ?

[Alex Pospeliri]

Sergeyoffkey, Ты отправляешь запрос и ждешь 1сек, за это время в обычном режиме успевает придти ответ от FB, но если не успеет, то будет опять работать с ошибкой. Мне не нравится такой вариант, как Костыль можно использовать. Попробуй разобраться с асинхронными функциями, у меня работает - мой пример на продакшене, причем там, сразу много разных запросов последовательно делается к FB и все работает.
Сделай тестовый пример со своей проблемой на codepen или аналоге, посмотрим в живую где ошибка.

[Sergeyoffkey]

Alex Pospeliri, Могу я просто архив сбросить ???

[Sergeyoffkey]

Alex Pospeliri, Просто я хз как сделать этот пример на кодепен так как всё на компонентах построену.

[Alex Pospeliri]

Sergeyoffkey, кидай на почту ;)

[Sergeyoffkey]

Alex Pospeliri,Кинул линк на гугл драйв с проектом

[Sergeyoffkey]

Alex Pospeliri, [e-mail] 123456789

[Alex Pospeliri]

А регистрация работает ?

[Sergeyoffkey]

Alex Pospeliri, да

[Alex Pospeliri]

1. Добрый совет, код почистить максимально, настрой линтер, желательно с prettier. Очень тяжело читать.
2. App.vue всю разметку долой из главного модуля. (ошибка в этом модуле, была из-за

userSaveSession() {
  return this.$store.getters('userSaveSession')
}
,

должно быть

userSaveSession() {
  this.$store.getters.userSaveSession
}

)
3. main.js добавить (if):

firebase.auth().onAuthStateChanged(async (user) => {
            if (user) {
                try {
                    await this.$store.dispatch('userSaveSession', user)
                } catch (err) {
                    //
                }
            }
        });

[Sergeyoffkey]

Alex Pospeliri, Спасибо огромное За помощь!!

[Sergeyoffkey]

Alex Pospeliri, Можно еще вопрос по поводу 2).
Я просто относительно недавно начал собирать апп на вью.
Что должно бы по хорошему в главном модуле АПП???

[Sergeyoffkey]

Alex Pospeliri, Понял а где хранить общие скрипты для всех модулей ? loading к примеру нужен на всех модулях,

[Alex Pospeliri]

ИМХО, максимально просто, минимум скриптов,
и как вариант разметка главного модуля:

<template>
  <div>
    <router-view></router-view>
    <app-modal/>
    <app-loader/>
  </div>
</template>

[Sergeyoffkey]

Alex Pospeliri,
Кстати этот код у меня в Экшинах а не в геттерах. И у меня сначала было так :
Файл АПП

userSaveSession() {
        return this.$store.dispatch('userSaveSession')
      },

Его нужно передать в Геттер ?

[Alex Pospeliri]

Sergeyoffkey, если нужно хранить то используй.

[Alex Pospeliri]

Sergeyoffkey, Зачем ? что ты хочешь, добиться этим действием ?

[Sergeyoffkey]

Alex Pospeliri, Ну по идее потому что в геттере у меня нет такой функции как userSaveSession. А в Вашем примере вызов фоо, идеть через геттерс.

[Alex Pospeliri]

Sergeyoffkey, торопился не посмотрел да нет, нужно создать то, что ты хочешь показывать в computed

[Sergeyoffkey]

Сделал всё что описано выше. Что то ничего (((((
Что я должен вернуть в геттере ???

[Sergeyoffkey]

В компутед, я вызываю екшоны ? а в методах геттеры ?

[Sergeyoffkey]

О вроде как что то получилось.

[Sergeyoffkey]

Спасибо!