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 · 5 comments
Closed

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

billouboq opened this issue Oct 5, 2016 · 5 comments
Labels

Comments

@billouboq
Copy link
Contributor

@billouboq 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 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!

@fnlctrl fnlctrl added the need repro label Oct 5, 2016
@billouboq
Copy link
Contributor Author

@billouboq billouboq commented Oct 5, 2016

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 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 added bug 2.x and removed need repro labels Oct 5, 2016
@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

@yyx990803 yyx990803 commented Oct 13, 2016

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

@activey
Copy link

@activey activey commented Jun 22, 2017

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

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

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.