简单的路由守卫

樱花依旧如初

于 2021-04-24 09:28:48 发布

阅读量140

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/Daisy_i/article/details/116082010

本文介绍了如何在 Vue 项目中实现路由的权限控制。通过在路由配置中添加 `meta` 字段，设置 `isLogin` 来标识是否需要登录。在路由守卫中，检查目标路由的 `meta.isLogin`，如果为真，则判断用户是否已登录，未登录则重定向到登录页面；反之，允许用户访问。这种方式确保了只有登录用户才能访问特定的受保护路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要在配置路由时给路由添加meta，如下：

component:'组件',
meta:{
  isLogin:true
}

// 路由守卫
router.beforeEach((to, from, next) => {
    // console.log(to)
    if (to.matched.some(res => res.meta.isLogin)) { //判断是否需要登录
        if (jsCookie.get('AdminToken')) {
            next();
        } else {
            next({
                path: "/",
                query: {
                    redirect: to.fullPath
                }
            });
        }
    } else {
        next()
    }
});