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 ，其中检查看到我们在登录页面上并停止。

现在，我将点击 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执行此操作。我缺少什么？

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

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

1 个答案: