路由局部拦截的几种方式

liuhongboke

于 2022-08-01 15:52:52 发布

阅读量698

点赞数

CC 4.0 BY-SA版权

分类专栏： vue实战文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/liuhongboke/article/details/126102942

vue实战专栏收录该内容

16 篇文章

订阅专栏

本文探讨了如何在Vue路由中实现内部拦截并验证用户登录状态，以及如何在中心组件中进行权限控制。通过实例解析了beforeEnter钩子的使用和localStorage配合，同时介绍了两种场景下的权限管理策略。

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

1，在路由内部直接拦截

    {
        path:'/active',
        component:Active,
        meta:{
            iskey:true
        },
        //路由独享（局部）拦截
        beforeEnter:(to,from,naxt)=>{
            if(localStorage.getItem('token')){
                naxt()
            }else{
                next('/login')
            }
        }
    },

2.直接在页面center组件中拦截

center