How to fix vue-router protection?

Question

firebase

In the application, on some routes, there is a beforeEnter with an authentication check that redirects to the login page if the user is not logged in. If the user logs in, everything works fine, but when the page is reloaded, it still redirects to the login page. Whether who faced it?

Answer 1

{
      path: '/login',
      name: 'Login',
      component: Login,
      meta: { requiresAuth: false }
    },    
//---------------
router.beforeEach((to, from, next) => {
  if(!to.matched[0]){
    router.push({ name: 'Login' });
  }else if(to.meta.requiresAuth){		
      S.currentUser ? next() : router.push({ name: 'Login' })
  }
  }else{
    next();
  }
});

Answer 2

the router looks like this:
beforeEach like this:

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.account.access) {
      next({ name: 'Signin' })
    } else {
      next()
    }
  } else {
    next()
  }
})

in store.state.account.access true/false, but string types can also be handled (guest/user/admin/etc.)

Answer 3

Just initialize the application itself in main.js after changing auth:

fb.auth().onAuthStateChanged(user => {
  if (!app) {
    app = new Vue({
      el: '#app',
      store,
      router,
      components: { App },
      template: '<App/>',
      created () {
        if (user) {
        }
      }
    })
  }
})