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