

**実装したいこと**  
firebaseのログイン、ログアウトの処理を実装し、リロード時はそのままの画面を表示し、ログアウト後に、ログイン画面に遷移しようとすると、ログイン画面に遷移するようにする。  
**質問内容**  
現在、「ログアウト」、「リロード」、「ログアウト後にログイン中の画面に遷移しようとすると、ログイン画面に遷移する」の3つは、実装できたのですが、リロードをした後に、ログアウトをすると、エラーが発生してしまいました。エラー内容を調べたところ、next関数が同時に1回以上呼ばれていることが原因だと思い、if、elseを使用して実装したのですが、エラーが解消できなかったです。

**発生しているエラー**

[code]

    Uncaught (in promise) Error: Navigation cancelled from "/Home" to "/" with a new navigation.
        at createRouterError (vue-router.esm.js?8c4f:2065)
        at createNavigationCancelledError (vue-router.esm.js?8c4f:2047)
        at eval (vue-router.esm.js?8c4f:2394)
        at step (vue-router.esm.js?8c4f:2001)
        at step (vue-router.esm.js?8c4f:2008)
        at runQueue (vue-router.esm.js?8c4f:2012)
        at eval (vue-router.esm.js?8c4f:2392)
        at step (vue-router.esm.js?8c4f:2001)
        at eval (vue-router.esm.js?8c4f:2005)
        at eval (vue-router.esm.js?8c4f:2379)
    
[/code]

**該当のソースコード**

[code]

        {
          path: '/Home',
          component: Home,
          beforeEnter: function(to, from, next) {
            firebase.auth().onAuthStateChanged((user) => {
              console.log(user)
              console.log(!user)
              if (user) {
                next();
              } else {
                next({
                  path: '/',
                  query: { redirect: to.fullPath },
                });
              }
            })
    }
    
[/code]

どうすればこのエラーが解消できるか検討もついてないです。  
ご教授よろしくお願いします


CC BY-SA 4.0
2021-04-20T09:11:24.703
75399
2021-04-20T15:42:58.790
2021-04-20T15:42:58.790
44921
44921
question
vue.js vuex
vue-routerにて、ログアウト時とリロード時の処理を実装したい