Router guard login page after logging already with Vue.js

Viewed 356

i need to know how to make a route guard to prevent users from going back again to login page or sign up after being already logged in and redirected him to the home page

i've router guard to prevent users from going to home page without logging in , here is the code :

{
  path: '/login',
  name: 'login',
  component: login,
},
,
{
  path: '/home',
  name: 'home',
  component: home,
  meta: {
    requiresAuth: true
  }
}


router.beforeEach((to, from, next) => {
  if(to.matched.some(rec=> rec.meta.requiresAuth)){
    //check auth state of user
    let user = firebase.auth().currentUser
    if(user){
      next()
    }else{
      next({name: 'welcome'})
    }
  }else{
    next()
  }
})

So i need to do the opposite .. to guard the login page from going back after being already logged , can any body help me ??

1 Answers

You can add another meta tag on the login route object and do your checks. Like below:

{
 path: '/login',
 name: 'login',
 component: login,
 meta: {
 requiresVisitor: true
 }
},
{
path: '/home',
name: 'home',
component: home,
meta: {
requiresAuth: true
 }
}


router.beforeEach((to, from, next) => {
if(to.matched.some(rec=> rec.meta.requiresAuth)){
//check auth state of user
let user = firebase.auth().currentUser
if(user){
  next()
}else{
  next({name: 'welcome'})
 }
}
else if(to.matched.some(record => record.meta.requiresVisitor)){
   let user = firebase.auth().currentUser
   if(user){
   next({name: 'home'})
  } else{
  next()
  }
}
else{
next()
 }
})
Related