路由局部拦截的几种方式

最新推荐文章于 2024-01-30 16:05:46 发布

原创最新推荐文章于 2024-01-30 16:05:46 发布 · 757 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

vue实战专栏收录该内容

16 篇文章

订阅专栏

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

1，在路由内部直接拦截

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

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

center