已使用 Vue.js 登录后的 Router guard 登录页面

Question

我需要知道如何制作一个路由守卫以防止用户在已经登录并重定向到主页后再次返回登录页面或注册

我有 router guard 来防止用户在没有登录的情况下进入主页，这里是代码：

{
  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()
  }
})

所以我需要做相反的事情..以防止登录页面在已经登录后返回，任何人都可以帮助我吗？？

Answer 1

您可以在登录路由对象上添加另一个元标记并进行检查。如下所示：

{
 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()
 }
})

已使用 Vue.js 登录后的 Router guard 登录页面

Router guard login page after logging already with Vue.js

vue.js

vue-router

vuejs2