检查vue-router.beforeEach不限制对路由的访问

Question

首先,我正在使用带有webpack,vue-router(在历史模式 - SPA站点中)的vuejs 2.0,以及在加载热模块的webpack dev服务器上运行的vuex.

我有大约10个路由映射到组件.网站工作得很好,但现在我正在添加一些基于令牌的身份验证.我正在使用router.beforeEach来执行令牌检查.如果令牌有效,它应该让它们通过.如果令牌无效,则应将其重定向到/ login页面.问题是它执行检查并在第一次限制它.但第二次尝试允许我转到页面并显示内容.每隔一个请求似乎正确处理路由并重定向到/ login.我的checkToken()函数总是返回false,用于测试目的.

码:

// 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;
}

转到主页面("/"),它会按预期重定向到/ login.在我的控制台中,我有以下两个条目:

[14:36:30.399]:没有令牌,重定向登录.(/)[14:36:30.399]:你在登录页面上

似乎很好.它试图加载"/"并看到没有令牌,然后重定向到/ login,检查看到我们在登录页面上并停止.

现在我点击我的项目链接,它将带我到/项目.控制台输出:

[14:40:21.322]:没有令牌,重定向登录.(/项目)

完美,但项目页面实际上是显示而不是登录页面.

现在,我将点击我的站点链接,该链接应该将我带到/ site.控制台输出:

[14:41:50.790]:没有令牌,重定向登录.(/ site)[14:41:50.792]:你在登录页面上

看起来不错,浏览器正在显示网站页面.这正是我想要看到的.

现在,我将点击要求/请求的我的请求链接.控制台输出:

[14:44:13.114]:没有令牌,重定向登录.(/请求)

但再次,它不是重定向.当我看到我的登录页面时,我正在看到我的请求页面.

这次,我将再次单击我的Projects链接(/ project),错误地显示项目页面而不是登录页面.控制台输出:

[14:47:12.799]:没有令牌,重定向登录.(/ project)[14:47:12.800]:你在登录页面上

这一次,它将我的应用程序重定向到/ login页面.

它实际上是我点击的每个其他链接都被适当地重定向,无论我点击什么顺序或链接.第一个重定向,第二个重定向,第三个重定向,第四个不重定向,第五个重定向等等...

我已经尝试了下一个('/ login'),next('login')和router.push('login'),它们都是相同的结果.它知道何时应该重定向,但重定向仅在每隔一段时间起作用.

如果我执行完整请求(页面刷新,输入地址并按Enter键),它将始终按计划重定向到/ login,但我正在尝试使用SPA执行此操作.我缺少什么？

Answer 1

固定.我的监督.

这是路由器代码应该是:

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
});

愚蠢的问题与一个简单的答案,我让我next()在错误的地方,所以它总是在最后处理它.不过,我仍然很好奇为什么它会被正确地重定向.