路由守卫

最新推荐文章于 2025-10-12 21:43:18 发布

原创最新推荐文章于 2025-10-12 21:43:18 发布 · 236 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

28 篇文章

订阅专栏

该博客介绍了如何在Vue.js应用中设置路由导航守卫，确保用户访问特定页面前必须先进行登录。通过beforeEach钩子函数，检查每个路由跳转，如果目标路径不是登录页，则会检查sessionStorage中的token。如果存在token则允许访问，否则重定向至登录页。这种方式有效地保护了应用内受保护的资源。

路由文件设置

// 路由导航守卫
/*
    to: 到某个地址
    from: 从哪个地址来
    next： 是否放行
 */
router.beforeEach((to, from, next)=>{
    // 访问登页直接放行,其他页面判断是否有登录凭证，如果没有直接跳转到登录页
    if(to.path==='/login') return next();
    const tokenStr = window.sessionStorage.getItem('token');
    if(tokenStr){
        next()
    }else{
        next('/login')
    }
});