Question

我正在开发一个带有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相关的身份验证，我做错了什么？

如何使用vue-router

0 个答案: