Vue.js如何保护客户端路由？

Question

我现在正在构建一个spa，使用Vue.js作为前端框架，与一个纯json后端进行通信，该后端使用jsonwebtokens。我更熟悉React生态系统。目前我不确定如何保护Vue.js客户端路由。（这不是我决定的框架。我是新员工。耶！）

在React中，我会这样做。在项目的index.js文件中，在应用程序挂载之前检查本地存储中是否有jsonwebtoken。如果有，设置redux状态为已登录。如果没有，则设置为已注销。

然后，我将使用高阶组件来保护我的路由，以便每当用户尝试进入受保护的客户端路由时，我都会使用componentWillMount生命周期方法来检查已登录状态。如果已登录，则渲染组件。否则重定向到登录页面。

似乎在Vue中无法使用高阶组件实现相同的行为。或者我只是找不到可以向我展示如何解决此问题的文档。能否有人与我分享他们如何解决这个问题？

- user6127082

Answer 1

如文档中所解释的那样，您可以在要检查身份验证的所有路由上使用元字段。

文档中提供的示例：

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.requiresAuth)) { 
        // this route requires auth, check if logged in 
        // if not, redirect to login page. 
        if (!auth.loggedIn()) { 
            next({ 
                path: '/login', 
                query: { redirect: to.fullPath } 
            }) 
        } else { 
            next() 
        } 
    } else { 
        next() // make sure to always call next()! 
    } 
}) 

或者对于组件内的导航守卫，您可以按照wostex提供的第二个链接。

- Vamsi Krishna

---

我怎么在这里获取auth变量的引用？ - Matrix

Answer 2

我想我错过了路由元字段的文档。我做了一些愚蠢的事情，但我想这也算是有效的。哈哈。

router.beforeEach((to, from, next) => {
    let web = ["home", "login", "verifyAccount", "resetPassword","forgotPassword","register"];
    if(web.includes(to.name)){
        next();
    }else{
        axios.post('/api/auth/verify-token',{
            token: localStorage.token
        }).then(response=>{
            if(response.data.verification === true){
                next();
            }else{
                router.push({
                    name:'home',
                    params:{
                        serverError:true,
                        serverMsg: 'Please login to continue.'
                    }
                });
            }
        }).catch(response=> {
            console.log(response);
        });
    }
});

- Wang'l Pakhrin

Answer 3

这是使用Vue.js实现认证的好例子：link

更具体地说，这是有关导航守卫的手册：link

- Egor Stambakio