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

【问题标题】：How to protect client side routes in Vue.js?如何保护 Vue.js 中的客户端路由？
【发布时间】：2017-09-11 11:12:28
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript vue.js web-frontend vuex

【解决方案1】：

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

文档中提供的示例：

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

【讨论】：

如何在此处获取对 auth 变量的引用？

【解决方案2】：

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

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

【讨论】：

【解决方案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);
        });
    }
});

【讨论】：