Vue-router: beforeEnter fire twice on root path ('/') after async `next` call

Created on 5 Oct 2016 · 5Comments · Source: vuejs/vue-router

Hi, when my app start, beforeEnter is fired twice, dunno why. And since i'm using socket, after this all my sockets emit twice. Am I missing something ?

I'm using vue 2.

UPDATE: this seems to occur because of asynchronous calls in my function.
See this fiddle: https://jsfiddle.net/1xb99hz6/

This is my code :

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import socket from './services/socket'
import {auth} from './services/auth'

// import vue componenets
import App from './routes/app.vue'
import Signin from './routes/signin.vue'
import Signup from './routes/signup.vue'

// init all the things
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(socket.install);

// config routes
const router = new VueRouter({
   base: __dirname,
   linkActiveClass: 'active-link',
   routes: [
     { path: '/', beforeEnter: auth, component: App},
     { path: '/signin', component: Signin },
     { path: '/signup', component: Signup }
   ]
});

// mount a root Vue instance
new Vue({
   router,
}).$mount('#app');

And my auth function :

function auth(to, from, next) {

   console.log('in auth');

   // if no internet connection
   if (!navigator.onLine) {
      next('/nointernet');
   }

   const jwt = getToken();

   if (jwt) {

      // send the jwt
      socket.emit('authenticate', {token: jwt}) ;

      // if user is authenticated
      socket.once('authenticated', (token) => {
         next();
      });

      // if user is unauthorized
      socket.once('unauthorized', () => {
         removeToken(tokenKey);
         next('/signin');
      });

   } else {
      next('/signin');
   }

}

in console I get 'in auth' twice in a really short amount of time.

2.x bug

Source