解決Vue Router無限重定向錯誤的方法

Question

在router.beforeEach中，我想要檢查存儲中是否已經存在sessionToken，如果不存在則重定向到登錄頁面以獲取它，但是我遇到了以下錯誤：

從「/」跳到「/login」時，導覽守衛偵測到無限重定向。為了避免堆疊溢出，中止導航。如果不修復，這將在生產環境中出現問題。 

我的router.js中的程式碼：

<code>router.beforeEach((to, from, next) => {
  if(ENV == 'development') {
    let sessionStorage = storage.sessionStorageGet('_sessionToken')
    if (sessionStorage === null) next({ name: 'Login' })
    else next()
  }
})
</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();
    }
  }
});