Vue Router の無限リダイレクト エラーを解決する方法

Question

router.beforeEach で、sessionToken がストレージにすでに存在するかどうかを確認し、存在しない場合はログイン ページにリダイレクトして取得したいのですが、次のエラーが発生します。

「/」から「/login」にジャンプするときに、ナビゲーション ガードが無限リダイレクトを検出しました。スタック オーバーフローを回避するには、ナビゲーションを中止します。修正しないと、実稼働環境で問題が発生する可能性があります。 

router.js のコード:

<code>router.beforeEach((to, from, next) => {
  if(ENV == '開発') {
    let sessionStorage = storage.sessionStorageGet('_sessionToken')
    if (sessionStorage === null) next({ name: 'ログイン' })
    それ以外の場合は次()
  }
})
</code>

Answer 1

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login'),
    meta: {
      requiresAuth: false
    }
  },
  {
    path: '/private',
    ... private route config,
    meta: {
      requiresAuth: true
    }
  }
];

router.beforeEach(async (to, from, next) => {
  if (ENV == 'development') {
    
    if (to.matched.some(record => record.meta.requiresAuth)) {
      const sessionStorage = storage.sessionStorageGet('_sessionToken')
  
      if (sessionStorage) {
        next();
      } else {
        router.push({ name: 'Login' });
      }
    } else {
      next();
    }
  }
});