vue、vue-routerのrouter.beforeEachでデッドループが発生する

Question

私は問題解決のためにGoogle検索を試してもまだ解決できないという問題があります。

私はrouter.beforeEachを使用してチェックトークンが存在します。

I直接URLバーにありませんログインして入力はlocalhost /概要、

それははlocalhost /ログインにリダイレクトし、ログインページとURLをリダイレクトする必要がありますが、エラーメッセージが失敗し、表示された場合以下、

最大コールスタックサイズは

を超えました

router.beforeEachメソッドを変更するにはどうすればよいですか？

router.jsで

import Vue from 'vue' 
import store from '@/store/index' 
import Router from 'vue-router' 
import Overview from '@/components/Overview' 
import Login from '@/components/Login' 

Vue.use(Router) 

const router = new Router({ 
    mode: 'history', 
    routes: [ 
     { 
      path: '/', 
      name: 'Login', 
      component: Login, 
      meta: { 
       requiresAuth: false 
      } 
     }, 
     { 
      path: '/overview', 
      name: 'Overview', 
      component: Overview, 
      meta: { 
       requiresAuth: true 
      } 
     },   
     { 
      path: '*', 
      redirect: '/login', 
      meta: { 
       requiresAuth: false 
      } 
     } 
    ] 
} 



router.beforeEach((to, from, next) => { 
    let token = store.state.token 
    if (token) { 
     if (to.query.redirect) { 
      next({path: to.query.redirect}) 
     } else { 
      if (['/login'].includes(to.path)) { 
       next({path: '/overview'}) 
      } else { 
       next() 
      } 
     } 
    } else { 
     let requiresAuth = to.matched.some(record => record.meta.requiresAuth) 
     if (requiresAuth) { 
      next({path: '/login', query: { redirect: to.fullPath }}) 
     } else { 
      next() 
     } 
    } 
}) 


export default router 

Answer 1

あなたのログ・パスは、ページが認証を必要とするかどうかを検出するためにあなたのメカニズムが正しいことを/自体AUTHを必要としないことを確認してください。

ナビゲーションガード機能は、ナビゲーションガード自体にプログラムでリダイレクトするときなど、ルートに達するたびに呼び出されます。ですから、ループを起こさない（つまり、リダイレクトをトリガーするリダイレクトをトリガーする）関数を作成するには、そのことを考慮する必要があります。