Nuxt3路由中间件中首次调用navigateTo失效问题求助

问题代码 #

export default defineNuxtRouteMiddleware(async(to, from) => {
    const loggedIn = useState('loggedIn', () => false)
    if(loggedIn.value == false) {
        if(to.path == '/auth/login') {
            await navigateTo(to.path)
        }else if(to.path == '/') {
            await navigateTo('/auth/login')
        }else if(!(to.path == '/auth/login') or !(to.path == '/')) {
            //return abortNavigation()
            await navigateTo('/auth/login')
        }else {
            return abortNavigation()
        }
    }else {
        console.log('to:', to.path)
        console.log('from:', from.path)
        await navigateTo(to.path)
    }
})

问题描述 #

直接访问/dashboard时，上述代码中else if(!(to.path == '/auth/login') or !(to.path == '/'))分支下的await navigateTo('/auth/login')首次调用失效；但在任意页面调用过一次await navigateTo('/dashboard')后，该跳转恢复正常；使用return abortNavigation()则始终正常。需要实现无需预先调用导航，首次跳转即可生效。

原因分析 #

1. 逻辑判断错误：!(to.path == '/auth/login') or !(to.path == '/')这个条件永远为true——只要路径不是登录页或者不是首页，条件就成立，这会导致分支逻辑混乱，覆盖其他判断。
2. 未中断导航流程：Nuxt路由中间件中，调用navigateTo时需要通过return来中断当前的导航流程，否则后续代码可能继续执行，导致跳转被忽略或覆盖。
3. 多余的导航调用：已登录时调用await navigateTo(to.path)会触发不必要的导航循环，干扰正常路由流程。

修复方案 #

修正逻辑判断，使用正确的逻辑运算符，同时在navigateTo前添加return中断当前导航，移除多余的导航调用：

export default defineNuxtRouteMiddleware(async(to, from) => {
    const loggedIn = useState('loggedIn', () => false)
    
    if (!loggedIn.value) {
        // 已在登录页，直接放行
        if (to.path === '/auth/login') {
            return
        }
        // 访问首页或其他未授权页面，跳转到登录页
        return navigateTo('/auth/login')
    } else {
        // 已登录，直接放行，无需额外导航
        console.log('to:', to.path)
        console.log('from:', from.path)
    }
})

修改说明 #

• 简化判断逻辑：未登录时，只要不在登录页，直接跳转到登录页，无需复杂的多分支判断。
• 添加return：调用navigateTo时通过return中断当前导航，确保跳转生效。
• 移除多余导航：已登录时直接放行，避免不必要的导航循环。

内容的提问来源于stack exchange，提问作者saifulmasud