首先,我正在使用带有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执行此操作。我缺少什么?
答案 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()
在错误的地方,所以它总是在最后处理它。我仍然很好奇它为什么会正确地重定向。