Vue路由器-重定向到相同的路由不会触发afterEach()保护

Question

我是一个单页应用程序的vue路由器，我已经在路由器中实现了几个保护。我注意到，如果一个防护程序将我重定向到我实际所在的同一个页面，afterEach()函数不会触发。

让我给你举个例子。假设您有以下流程：我在登录页面；我使用我的凭据，然后重定向到主页。在这里，我单击"返回"按钮返回登录页面，但一个检查我是否已经登录的警卫会将我重定向回主页。在这种情况下，afterEach()函数不会触发。

我该如何解决这个问题？

Answer 1

此解决方案不适用于所有情况，但如果您在路由器的beforeEach挂钩中实现额外的手动导航保护，则它可以适用于您提到的示例。

假设您有以下代码，其中用户尝试从/home导航到/login，并最终返回到/home而不触发afterEach挂钩：

router.beforeEach((to, from, next) => {
if (user.isAuthenticated() && to.path === '/login') {
return next('/home')
}
return next()
})
router.afterEach(() => {
// some logic
})

将其重新转换为：

const afterEach = function() {
// some logic
}
router.beforeEach((to, from, next) => {
if (user.isAuthenticated() && to.path === '/login') {
if (from.path === '/home') {
afterEach()
}
return next('/home')
}
return next()
})
router.afterEach(afterEach)