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

时间:2017-04-12 20:07:06

标签: vue.js vuejs2 vue-router

首先,我正在使用带有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 ,其中检查看到我们在登录页面上并停止。

现在,我将点击 Projects 链接,该链接将带我进入 / project 。控制台输出:

  

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

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

现在,我点击我的网站链接,该链接应该转到 / site 。控制台输出:

  

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

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

现在,我将点击 / request 请求链接。控制台输出:

  

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

但又一次,它没有重定向。当我看到登录页面时,我正在看到请求页面。

这一次,我将再次点击 Projects 链接( / project )错误地显示项目页面,而不是< em>登录页面。控制台输出:

  

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

这一次,它将我重定向到了 / login 页面。

无论我点击什么顺序或哪个链接,我点击的每个其他链接都会被正确地重定向。第一个重定向,第二个重定向,第三个重定向,第四个不重定向,第五个重定向等等......

我已经尝试了下一个('/ login'),next('login')和router.push('login'),它们都是相同的结果。它知道什么时候应该重定向,但重定向只能每隔一段时间运行一次。

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

1 个答案:

答案 0 :(得分:17)

固定。我的监督。

这是路由器代码应该是:

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()在错误的地方,所以它总是在最后处理它。我仍然很好奇它为什么会正确地重定向。