我正在开发一个带有vue.js前端和laravel后端的迷你购物车项目。客人可以访问这些页面,直到他们到达结帐页面,该页面应该只有经过身份验证的用户才能访问。我正在利用vue-router
在客人可访问的网址之间进行导航。当用户选择了他/她想要订购的商品时,他们会点击按钮
<router-link :to="{name: 'checkout', params: {total: totalCost}}" class="btn btn-default">Proceed to Checkout</router-link>
如果它们经过身份验证,则会将它们带到经过身份验证的结帐页面(我已创建了一个带有auth中间件的控制器来处理此问题)。如果他们未经过身份验证,我想将他们重定向到laravel登录页面,这样他们就可以登录并在登录后返回结帐页面。我有一个vue-route导航防护来处理这个问题:
router.beforeEach((to, from, next)=>{
if(to.matched.some(rec => rec.meta.requiresAuth)){
const authUser = window.Laravel.user
if(authUser){
next()
}else{
const login = router.push('/login')
next(login)
}
}
next()
})
问题是这不起作用,因为我被重定向到空login
路径。只是为了确保我尝试重定向到我在路径文件中创建的vue组件,如下所示:
{path: '/checkout-test', name: 'checkoutTest', props:true, component: checkoutTest, meta:{requiresAuth: true}}
这非常有效。这意味着我的拦截可能是由laravel身份验证引起的。我希望laravel能够处理与vue.js相关的身份验证,我做错了什么?