title: Vue router guard triplicating navigation
body: <p>I have a router guard <code>beforeEach</code> route to watch if there's user authenticated:</p>
  <pre class="lang-js prettyprint-override"><code>import Vue from &quot;vue&quot;;
  import VueRouter from &quot;vue-router&quot;
  import Login from &quot;../views/Login.vue&quot;
  import Home from &quot;../components/Home.vue&quot;
  import Register from &quot;../views/Register.vue&quot;
  import Dashboard from &quot;../views/Dashboard.vue&quot;
  import Pricing from &quot;../components/Pricing.vue&quot;
  import Invoices from &quot;../components/Invoices.vue&quot;
  import { FirebaseAuth } from &quot;../firebase/firebase&quot;
  
  Vue.use(VueRouter);
  
  const routes = [
    {
      path: &quot;*&quot;,
      redirect: &quot;/login&quot;,
    },
    {
      path: &quot;/dashboard&quot;,
      name: &quot;dashboard&quot;,
      component: Dashboard,
      children: [
        {
          path: &quot;home&quot;,
          name: &quot;home&quot;,
          component: Home,
        },
        {
          path: &quot;pricing&quot;,
          name: &quot;pricing&quot;,
          component: Pricing,
        },
        {
          path: &quot;invoices&quot;,
          name: &quot;invoices&quot;,
          component: Invoices,
        }
      ],
      meta: {
        auth: true,
      },
      redirect: &quot;home&quot;
    },
    {
      path: &quot;/login&quot;,
      name: &quot;login&quot;,
      component: Login,
    },
    {
      path: &quot;/register&quot;,
      name: &quot;register&quot;,
      component: Register,
    }
  ];
  
  const router = new VueRouter({
    mode: &quot;history&quot;,
    base: process.env.BASE_URL,
    routes
  });
  
  
  router.beforeEach((to, from, next)=&gt;{
    let user = FirebaseAuth.currentUser;
    let auth = to.matched.some(record =&gt; record.meta.auth);
    
    if (auth &amp;&amp; !user) {
  
      next('/login');
  
    } else if (!auth &amp;&amp; user) {
  
      next('/dashboard/home');
  
    } else{
  
      next();
  
    }
  });
  
  export default router;
  </code></pre>
  <p>When I perform <code>logouts</code> and <code>logins</code> there's an error about redundant navigation, however, I just assumed that it's ok if I just catch <code>this.$router.push('/dashboard/home').catch(err =&gt; err);</code> and move on without the <code>console.log</code> err. But creating an alert on component <code>created()</code> I've noticed that the thing is just more serious than what I thought, the component that shows the alert on <code>created()</code> it's showing it three times, and as I have a fetch for restore items on <code>created()</code>, that function is being triggered three times which is obviously not the performance wanted.</p>
  <pre class="lang-js prettyprint-override"><code>  async created() {
      alert(&quot;created&quot;)
      this.credits = await fetchCredits(this.$firestore, this.$auth.currentUser);
      let role = await getCustomClaimRole(this.$auth.currentUser);
      this.subscription = role
        ? role.charAt(0).toUpperCase() + role.slice(1) + &quot; &quot; + &quot;plan&quot;
        : &quot;You haven't subscribed yet&quot;;
      this.isLoading();
    },
  </code></pre>
  <p>inside <code>fetchCredits()</code> is the console.log triggering three times</p>
  <pre class="lang-js prettyprint-override"><code>export const fetchCredits = async function (firestore, currentUser) {
      // firestore collection of customers
      const db = firestore.collection(&quot;customers&quot;);
      /**
       * Let's fetch the credits from the user:
       */
      const credits = (await db.doc(currentUser.uid).get()).data();
      if (credits !== &quot;undefined&quot;) {
          console.log(credits);
          return credits.credits
      } else {
          return 0;
      }
  }
  </code></pre>
  <p>I think the problem is with the navigation guard, however, correct me if I'm wrong, but how to solve this?</p>