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

Question

首先，我在 webpack 开发服务器上使用 vuejs 2.0 和 webpack、vue-router（历史模式 - SPA 站点）和 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。在我的控制台中，我有以下 2 个条目：

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

好像还不错。它试图加载“/”，发现没有令牌，然后重定向到 /login，检查发现我们在登录页面并停止。

现在我将单击我的 Projects link，它将带我到 /project。控制台输出：

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

完美，但实际显示的是 projects 页面，而不是 login 页面。

现在我将单击我的 Sites link，它应该会带我到 /site。控制台输出：

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

看起来不错，并且浏览器正在显示站点页面。这正是我想看到的。

现在我将单击我的请求 link /请求。控制台输出：

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

但再一次，它没有重定向。当我应该看到 login 页面时，我看到了 request 页面。

这一次，我将再次单击 Projects link (/project)，它错误地显示了 project 页面而不是 login 页面。控制台输出：

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

这一次，它将我重定向到 /login 页面，这是应该的。

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

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

如果我执行完整请求（页面刷新、输入地址并按回车），它将始终按计划重定向到 /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 不限制对路由的访问

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

vue.js

vue-router

vuejs2