如果经过身份验证的 NodeJS 则重定向

Question

我正在使用以下技术

• NodeJS
• ExpressJS
• VueJS
• ngnix

我将x-access-token 存储在localstorage 中。

当用户访问站点www.example.com 时，vuejs 组件会执行以下操作

通过调用身份验证端点来验证用户是否已登录 如果通过验证，它会重定向到www.example.com/controlpanel

当然，问题是 vuejs 组件需要一段时间才能加载，因此页面加载后会被重定向。

有没有办法以更清洁的方式处理上述情况。甚至使用ngnix？

谢谢

Answer 1

在访问首页时渲染的组件中(根路由/) 添加beforeRouteEnter()导航守卫如下：

//in root route component options

beforeRouteEnter(to, from, next){
    myAjax.get('/auth').then((res) => {
        if(res.data.user){
            //user logged in
            next('/controlpanel');
        }else{
            next('/');
        }
    });
}

这个守卫在路由组件被渲染之前被调用并且只有当你调用next()时才会被确认和渲染

请记住，您将无法访问组件的 vue 实例，因为组件尚未创建

要访问beforeRouteEnter() 中的 vue 实例，请执行以下操作：

beforeRouteEnter(to, from, next){
    next(vm => {
        //acess the component's instance using vm
    }
}   

欲了解更多信息，请查看In-Component Guards