Как правильно настроить защиту роутинга в Vue?

Question

[Виктор]

Имеется такой роут

{
      path: '/orders',
      name: 'Orders',
      component: Orders,
      beforeEnter: (from, to, next) => {
        if(store.getters.user) {
          next()
        } else {
          next('/login')    
        } 
      }

Логика такая если пользователь зарегистрирован, то он пускает на страницу, если нет, то отправляет для регистрации.
Сведения о регистрации получаем в App.vue через firebase:

mounted() { //проверка при перезагрузке на зареген ли пользователь или нет
    firebase.auth().onAuthStateChanged(user => { //проверка при первой загрузке и перезагрузке на то зареген ли пользователь
      if (user) {
        this.$store.dispatch('autoLoginUser', user)
      }
    });

    this.$store.dispatch('fetchAds');
  }

Вопрос вот в чем, я зарегился и зашел на страницу /orders. Находясь на этой странице я перезагрузился и меня выкидывает на страницу логина хотя я зарегистрирован. Получается что beforeEnter отрабатывает еще до того как данные о регистрации поступили в storе. Как это можно поправить?
Смотрел документацию там написано что надо делать так:

router.beforeEach((to, from, next) => {
  if (!isAuthenticated) next('/login')
  else next()
})

Однако когда я делал так у меня зацикливалось приложение. Что сделал не так?

Comments

[Athanor]

а что не работает?

[Виктор]

Athanor, Не дописал, теперь вопрос полный

Answer 1

[eugenedrvnk]

https://webdevblog.ru/ispolzovanie-middleware-vo-vue/

Answer 2

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

Ниже пример гварда роутов с firebase:

router.beforeEach((to, from, next)=>{
  const currentUser = firebase.auth().currentUser;
  const requireAuth = to.matched.some(record => record.meta.auth);
  if(requireAuth && !currentUser){
    next({name:'signIn'})
  }else{
    next();
  }
});

requireAuth - meta свойство в каждом роуте, которое показывает нужна ли авторизация для получения доступа к роуту.