title: Vuejs route navigation guard on async auth state request
body: <p>I'm using firebase to do authentication in my vuejs app. In my root (main.js) vue component. </p>
  
  <pre><code>  created() {
      auth.onAuthStateChanged((user) =&gt; {
        this.$store.commit('user/SET_USER', user);
        if (user &amp;&amp; user.emailVerified) {
          this.$store.dispatch('user/UPDATE_VERIFIED', {
            userId: user.uid,
          });
          // SUCCESSFUL LOGIN
          this.$router.replace('dashboard');
        } else if (user &amp;&amp; !user.emailVerified) {
          this.$router.replace('verify');
        }
      });
  </code></pre>
  
  <p>So essentially, my router navigation guard is checking auth status and doing routing before each route as well. </p>
  
  <pre><code>router.beforeEach((to, from, next) =&gt; {
    const currentUser = firebaseApp.auth().currentUser;
    const requiresAuth = to.matched.some(record =&gt; record.meta.requiresAuth);
    const allowUnverified = to.matched.some(record =&gt; record.meta.allowUnverified);
  
    if (requiresAuth &amp;&amp; !currentUser) {
      next('login');
    } else if (currentUser
                &amp;&amp; !currentUser.emailVerified
                &amp;&amp; !allowUnverified
                &amp;&amp; to.path !== '/verify') {
      next('verify');
    } else if (!requiresAuth &amp;&amp; currentUser) {
      next('dashboard');
    } else {
      next();
    }
  });
  </code></pre>
  
  <p>What happens is, when you refresh the page (with a valid auth token), you hit branch 1 of the route guard, stateChanges and the handler is called to redirect to /dashboard. So refreshing while logged in, always brings you to the dashboard route instead of the current route youre on.</p>
  
  <p>How can I handle this case? Adding a beforeEnter guard to each auth component smells bad to me <a href="https://router.vuejs.org/en/advanced/data-fetching.html" rel="nofollow noreferrer">Data Fetching Vue Docs</a>.</p>
  
  <p>Should this be in the store instead of the created hook on the root instance? Any help is greatly appreciated. This pattern is stumping me.</p>