configure router.beforeEach

Question

I try to get back the user on the homepage when he(it) clicks the arrow to return the previous page of the browser.

when I am on the page login I cannot go back with the arrows of the browser.

We advised me to use " to route BeforeEach " I do not understand how it works.

main.js:

    Vue.use(VueRouter)

const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
      meta: { requiresAuth: true }
    },
    {
      path: '/register',
      name: 'Register',
      component: Register,
    },
    {
      path: '/complete_registration',
      name: 'Complete Registration',
      component: CompleteRegistration,
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: { requiresAuth: true }
    }
]

const router = new VueRouter({routes, mode: 'history'})

router.beforeEach((to, from, next) => {

  if ( from.matched.some(record => record.meta.requiresAuth) ) {
    alert('enter')
    next('/');
  } else {
    next();
  }
});

By connecting me it shows me in a loop pop-up of alert

Answer 1

Thomas Kleßen is totally right in his comment:

1. You should add meta: { requiresAuth: true } only to the routes that need the user to be authenticated. It is not the case of the login page (nor the Register and Home ones I guess).
2. In router.beforeEach() you should check if the "target" needs the user to be authenticated, i.e. the to (and not the from, which corresponds to the page you are coming from).

However you need to add an extra check: if the user is not authenticated you need to redirect her/him to the login page. For that you can use firebase.auth().currentUser, as follows. See the corresponding Firebase doc here.

const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/register',
      name: 'Register',
      component: Register
    },
    {
      path: '/complete_registration',
      name: 'Complete Registration',
      component: CompleteRegistration
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: { requiresAuth: true }
    },
    {
      path: '/otherProtectedPage',
      name: 'OtherProtectedPage',
      component: OtherProtectedPage,
      meta: { requiresAuth: true }
    }
]

const router = new VueRouter({routes, mode: 'history'})

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record  => record.meta.requiresAuth)
    const currentUser = firebase.auth().currentUser

    if (requiresAuth && !currentUser) {
        next('/login')
    } else if (requiresAuth && currentUser) {
        next()
    } else {
        next()
    }
})