Checks in vue-router.beforeEach not restricting access to routes

Question

First off, I'm using vuejs 2.0 with webpack, vue-router (in history mode - SPA site), and vuex running on the webpack dev server with hot module loading.

I have about 10 routes mapped out to components. Site is working great, but now I'm adding some token based authentication. I'm using router.beforeEach to perform a token check. If the token is valid, it should let them through. If the token is NOT valid, it should redirect them to the /login page. The problem is that it performs the check and restricts it the first time. But the second attempt allows me to go to the page and display the contents. Every second request seems to process the route properly and redirect to /login. My checkToken() function is always returning false, for testing purposes.

Code:

// Configure Router
const router = new Router({
    routes, //routes are configured elsewhere, they work fine so not needed
    mode: 'history'
})

router.beforeEach((to, from, next) => {
    if(to.path != '/login') {
        if(checkToken()) { 
            logger('There is a token, resume. (' + to.path + ')');
            next();
        } else {
            logger('There is no token, redirect to login. (' + to.path + ')');
            next('login');
            // next('/login');
            // router.push('login');
        }
    } else {
        logger('You\'re on the login page');
    }
    next();
});


function checkToken() {
    return false;
}

Going to the main page ("/"), it redirects to /login as expected. In my console, I have the following 2 entries:

[ 14:36:30.399 ] : There is no token, redirect to login. (/) [ 14:36:30.399 ] : You're on the login page

Seems to be good. It tried to load "/" and saw there was no token, then redirected to /login where the check sees that we're on the login page and stops.

Now I'll click on my Projects link that will take me to /project. Console output:

[ 14:40:21.322 ] : There is no token, redirect to login. (/project)

Perfect, but the projects page is actually being displayed rather than the login page.

Now I'll click on my Sites link that should take me to /site. Console output:

[ 14:41:50.790 ] : There is no token, redirect to login. (/site) [ 14:41:50.792 ] : You're on the login page

Looks good, AND the browser is displaying the site page. This is exactly what I want to see.

Now I'll click on my Requests link that to /request. Console output:

[ 14:44:13.114 ] : There is no token, redirect to login. (/request)

but once again, it's not redirecting. I'm seeing my request page when I should be seeing my login page.

This time, I'll click on my Projects link again (/project) that incorrectly displayed the project page rather than the login page. Console output:

[ 14:47:12.799 ] : There is no token, redirect to login. (/project) [ 14:47:12.800 ] : You're on the login page

This time, it redirected my to the /login page, as it should.

It is literally every other link I click that gets redirected appropriately, no matter what order or which link I click. First one redirects, second one doesn't, third one does, fourth doesn't, fifth does, etc...

I've tried next('/login'), next('login'), and router.push('login') and they're all the same result. It knows when it's supposed to redirect, but the redirect only works every other time.

If I do a full request (page refresh, type the address in and press enter), it will always redirect to /login as planned, but I'm trying to do this with an SPA. Anything I'm missing?

Answer 1

Fixed. Oversight on my part.

This is what the router code should have been:

router.beforeEach((to, from, next) => {
    if(to.path != '/login') {
        if(checkToken()) { 
            logger('There is a token, resume. (' + to.path + ')');
            next();
        } else {
            logger('There is no token, redirect to login. (' + to.path + ')');
            next('login');
        }
    } else {
        logger('You\'re on the login page');
        next(); // This is where it should have been
    }
    // next(); - This is in the wrong place
});

Silly issue with a simple answer, I had my next() in the wrong place so it was always processing it at the end. I am still curious why it ever redirected correctly, though.