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

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

作为回应，我会这样做。 在项目的index.js文件中。在安装应用程序之前，请检查本地存储中是否存在jsonwebtoken。如果存在，请将redux状态设置为“已登录”。如果未设置为注销

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

---

vue中的高阶组件似乎无法实现相同的行为。或者我就是找不到说明如何实现它的文档。有人能和我分享一下他们将如何解决这个问题吗？

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

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

如中所述，您可以在所有要检查身份验证的路由上使用元字段

文档中提供的示例：

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提供的第二个链接，我想我错过了routes meta feilds的文档。我在做一些愚蠢的事情，但我想是在工作。哈哈

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

---

在这里如何获取对auth变量的引用？