beforeEnter fire twice on root path ('/') after async `next` call
See original GitHub issueHi, 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:
- Created 7 years ago
- Comments:5 (4 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Still happens to me, vue 2.3.4, vue-router 2.6.0
Closed via #735 - thanks for fixing your own issue! 😄