Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

beforeEnter fire twice on root path ('/') after async next call #725

Closed
billouboq opened this issue Oct 5, 2016 · 6 comments
Closed

beforeEnter fire twice on root path ('/') after async next call #725

billouboq opened this issue Oct 5, 2016 · 6 comments

Comments

@billouboq
Copy link
Contributor

billouboq commented Oct 5, 2016

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.

@fnlctrl
Copy link
Member

fnlctrl commented Oct 5, 2016

Hi, thanks for filling this issue. Please follow the Issue Reporting Guidelines and provide a live example on jsfiddle, codepen etc. Thanks!

@billouboq
Copy link
Contributor Author

The problem occur when I'm doing an asynchronous call in the beforeEnter function.
See this fiddle: https://jsfiddle.net/1xb99hz6/

@fnlctrl
Copy link
Member

fnlctrl commented Oct 5, 2016

Strangely, it happens only on the root path, and only after async next call.. https://jsfiddle.net/2qv45zcq/
Looks like a bug to me.

@fnlctrl fnlctrl changed the title beforeEnter fire twice beforeEnter fire twice on root path ('/') after async next call Oct 5, 2016
@yyx990803
Copy link
Member

Closed via #735 - thanks for fixing your own issue! :D

@activey
Copy link

activey commented Jun 22, 2017

Still happens to me, vue 2.3.4, vue-router 2.6.0

@amitchaudhary140
Copy link

Still happening.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants