question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
activeycommented, Jun 22, 2017

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

2reactions
yyx990803commented, Oct 13, 2016

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Router async beforeEach triggers two routes - Stack Overflow
The problem is that two routes are hit. When the page is loaded, the / route is triggered instantly, followed by my target...
Read more >
Duplicate API call when using beforeEnter - Vue Forum
Any idea how to prevent it from being called twice ? router.js : async beforeEnter(to, from, next) { await store.dispatch("fetchData").then(() => ...
Read more >
Changelog - Cypress Documentation
Fixed an issue with Angular Component Testing where urls within SASS/SCSS files were not being correctly resolved which could result in incomplete styling....
Read more >
Update on Async Rendering – React Blog
The new static getDerivedStateFromProps lifecycle is invoked after a component is instantiated as well as before it is re-rendered. It can ...
Read more >
54. Route & Component Based Guards like beforeEnter ...
In this video we will see about the route and component based guards like beforeEnter, before RouteLeave, update and enter - Vue 3If...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found