检查 vue-router.beforeEach 不限制对路由的访问
Posted
技术标签:
【中文标题】检查 vue-router.beforeEach 不限制对路由的访问【英文标题】:Checks in vue-router.beforeEach not restricting access to routes 【发布时间】:2017-09-08 18:38:30 【问题描述】:首先,我正在使用带有 webpack、vue-router(历史模式 - SPA 站点)和在 webpack 开发服务器上运行的 vuejs 2.0 以及热模块加载。
我有大约 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 ] : 没有令牌,重定向到登录。 (/) [ 14:36:30.399 ] : 你在登录页面上
看起来不错。它尝试加载“/”并看到没有令牌,然后重定向到 /login,检查发现我们在登录页面上并停止。
现在我将单击我的 Projects 链接,该链接会将我带到 /project。控制台输出:
[ 14:40:21.322 ] : 没有令牌,重定向到登录。 (/项目)
完美,但实际上显示的是 projects 页面而不是 login 页面。
现在我将单击我的 Sites 链接,该链接应该会将我带到 /site。控制台输出:
[ 14:41:50.790 ] : 没有令牌,重定向到登录。 (/地点) [ 14:41:50.792 ] : 你在登录页面上
看起来不错,并且浏览器正在显示 site 页面。这正是我想看到的。
现在我将单击指向 /request 的 Requests 链接。控制台输出:
[ 14:44:13.114 ] : 没有令牌,重定向到登录。 (/请求)
但再一次,它没有重定向。当我应该看到我的 login 页面时,我看到了我的 request 页面。
这一次,我将再次单击我的 Projects 链接 (/project),该链接错误地显示了 project 页面而不是 登录页面。控制台输出:
[ 14:47:12.799 ] : 没有令牌,重定向到登录。 (/项目) [ 14:47:12.800 ] : 你在登录页面上
这一次,它将我重定向到 /login 页面,正如它应该的那样。
实际上,无论我点击什么顺序或点击哪个链接,我点击的所有其他链接都会得到适当的重定向。第一个重定向,第二个不重定向,第三个重定向,第四个不重定向,第五个重定向,等等......
我尝试过 next('/login')、next('login') 和 router.push('login'),结果都是一样的。它知道什么时候应该重定向,但重定向只能每隔一段时间才有效。
如果我执行完整请求(页面刷新,输入地址并按 Enter),它将始终按计划重定向到 /login,但我正在尝试通过 SPA 执行此操作.我有什么遗漏吗?
【问题讨论】:
你试过next(false)
@AmrAly 我有,它甚至没有试图阻止任何东西。我在控制台中看到“重定向到登录”消息,但它仍然会更改页面以显示路由。
我会说删除你最后的next()
方法,然后再试一次
@AmrAly 没有最后一个next()
,控制台一直告诉我它正在将我重定向到登录并且我在那里(完美),但它不会释放我并且我的登录组件永远不会显示向上。但这确实让我专注于最后一个next()
,我已经解决了这个问题。我应该在我的checkToken()
else 条件中而不是在 if 之外。不知道我是怎么错过的。
【参考方案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()
放错了地方,所以它总是在最后处理它。不过,我仍然很好奇它为什么会正确重定向。
【讨论】:
如何以及在哪里进行刷新令牌操作? @SuperComupter 我建议您打开自己的问题来解决如何获取新令牌 谢谢。在错误的地方调用 next() 也是我的问题。我假设 next() 出于某种原因退出了 beforeEach。以上是关于检查 vue-router.beforeEach 不限制对路由的访问的主要内容,如果未能解决你的问题,请参考以下文章
Laravel 5.1 + Vue.js - vue-router beforeEach AuthService