Vue 路由器 4 和之前的每个答案

【问题标题】：Vue router 4 and beforeEachVue 路由器 4 和之前的每个
【发布时间】：2021-05-06 09:12:02
【问题描述】：

我在路由器中添加了这段代码：

Router.beforeEach((to, from, next) => {
    // redirect to login page if not logged in and trying to access a restricted page
    const publicPages = ['/login']
    const authRequired = !publicPages.includes(to.path)
    const user = <Utilisateur>JSON.parse(<string>localStorage.getItem('user'))
    // console.log('user', user, authRequired, to, from, next)

    if (authRequired && !user && to.path !== '/connexion') {
      // console.log('redirect')
      next({ name: 'connexion', query: { from: to.fullPath } })
    }

    next()
  })

触发重定向时显示此警告消息，您知道我该如何解决这个问题吗？

|Vue Router warn]: 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.

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

您应该添加运行next() 的else 块：

Router.beforeEach((to, from, next) => {
    // redirect to login page if not logged in and trying to access a restricted page
    const publicPages = ['/login']
    const authRequired = !publicPages.includes(to.path)
    const user = <Utilisateur>JSON.parse(<string>localStorage.getItem('user'))
    // console.log('user', user, authRequired, to, from, next)

    if (authRequired && !user && to.path !== '/connexion') {
      // console.log('redirect')
      next({ name: 'connexion', query: { from: to.fullPath } })
    } else{
      next()
   }
  })

更多详情请查看this

【讨论】：