vue router 4 next() 回调警告

Question

我一直未能成功地尝试修复此 vue-router 警告：

当从“/”转到“/”时，在一个导航防护中多次调用“下一个”回调。它应该在每个导航守卫中被调用一次。这将在生产中失败。

我已阅读官方文档（https://next.router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards），但在进行建议的更改时我不断获得无限的下一个循环，所以我我显然做错了什么。

我想做的是：让未经身份验证的用户只能导航到“/”路线。如果他们尝试进入受保护的路由，则会被重定向到“/”。让经过身份验证的用户直接登陆“/mapping”并跳过“/”路线。然后他们可以导航到任何受保护的路线。

我使用“let user = projectAuth.currentUser”验证身份验证。

预先感谢您的提示

import { createRouter, createWebHistory } from 'vue-router'
import Mapping from '../views/Mapping.vue'
import Home from '../views/Home.vue'
import TestDthree from '../views/TestDthree.vue'
import Testpage1 from '../views/Testpage1.vue'
import { projectAuth } from '../firebase/config'



// auth guard or route guard
// requires to be authenticated
const requireAuth = (to, from, next) => {
  let user = projectAuth.currentUser
  if(!user){
    next({name:'Home'})
  }
  next()
}


// no auth needed
// bypassed Home for any logged in user
const requireNoAuth = (to, from, next) => {
  let user = projectAuth.currentUser
  if(user){
    next({name:'Mapping'})
  }
  next()
}







const routes = [ 
  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeEnter: requireNoAuth
  },
  {
    path: '/mapping',
    name: 'Mapping',
    component: Mapping,
    beforeEnter: requireAuth
  },
  {
    path: '/testpage1',
    name: 'Testpage1',
    component: Testpage1,
    beforeEnter: requireAuth
  },
  {
    path: '/loadLegacyData2',
    name: 'LoadLegacyData2',
    component: () => import( '../views/LoadLegacyData2.vue'),
    beforeEnter: requireAuth
  },
  {
    path: '/testmap',
    name: 'TestDthree',
    component: TestDthree,
    beforeEnter: requireAuth
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})


export default router

Answer 1

只需添加返回requireAuth：

  const requireAuth = (to, from, next) => {
    let user = projectAuth.currentUser
    if(!user){
      next({name:'Home'})
      return
    }
    next()
    return
  }

或者

  const requireAuth = (to, from, next) => {
      next(projectAuth.currentUser ? to : {name:'Home'})
      return
  }