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

Question

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

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

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

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

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 提供的第二个链接

Answer 2

这是使用 Vue.js 实现身份验证的一个很好的例子：链接

更具体地说，这里是关于导航的手册。 守卫：链接

Answer 3

我想我错过了路由元字段的文档。 我在做一些愚蠢的事情，但我想我在工作。 哈哈。

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);
        });
    }
});