vue router 4 next() 回调警告答案

【问题标题】：vue router 4 next() callback warningvue router 4 next() 回调警告
【发布时间】：2022-01-11 12:14:24
【问题描述】：

我一直在尝试修复这个 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

【问题讨论】：

标签： vue.js vue-router vuejs3 vue-router4

【解决方案1】：

只需在requireAuth 中添加退货：

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

【讨论】：

成功了，谢谢！

【解决方案2】：

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

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

【讨论】：