vue router 4 next() 回调警告

Question

我一直在尝试修复这个 vue-router 警告，但没有成功：

The "next" callback was called more than once in one navigation guard when going from "/" to "/". It should be called exactly one time in each navigation guard. This will fail in production.

我已经阅读了官方文档 (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

你必须检查你是否已经在页面上，否则它会无限循环。像这样

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

Answer 2

只需在requireAuth中添加returns:

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

vue router 4 next() 回调警告

vue router 4 next() callback warning

vue.js

vue-router

vuejs3

vue-router4