Vue.jsで問題が発生し、ユーザー認証時にログイン画面が表示される（フルページ更新）

Question

ルーティングガードを使用してルーティングが正常に動作しているため、ログインしたり、しかし、アドレスバー/auth/signinを入力すると、ダッシュボードにリダイレクトする直前にログイン画面が表示されます（beforeEachでルートがrequiresGuestであることが検出されたため）。

router.beforeEach(function (to, from, next) { 
    // prevent access to login & register after signing in 
    if (to.matched.some(record => record.meta.requiresGuest) 
     && auth.user.authenticated) 
    { 
     next({ 
      path: '/dashboard' 
     }); 
    } 
    if (to.matched.some(record => record.meta.requiresAuth)) { 
     // this route requires auth, check if logged in 
     // if not, redirect to login page. 
     if (!auth.user.authenticated) { 
      next({ 
       path: '/auth/signin', 
       query: { redirect: to.fullPath } 
      }) 
     } 
    } 
    next() // make sure to always call next()! 
}); 

コンポーネントがフラッシュ表示されないようにする方法はありますか。 コンポーネントが作成される前にbeforeEachがトリガーされていませんか？

Answer 1

if else条件文を変更してください。

router.beforeEach(function(to, from, next) { 
    // prevent access to login & register after signing in 
    if (to.matched.some(record => record.meta.requiresGuest) && auth.user.authenticated) { 
    next({ 
     path: '/dashboard' 
    }); 
    } else if (to.matched.some(record => record.meta.requiresAuth)) { 
    if (!auth.user.authenticated) { 
     next({ 
     path: '/auth/signin', 
     query: { 
      redirect: to.fullPath 
     } 
     }) 
    } 
    } else { 
    next() // make sure to always call next()! 
    } 
})