vue 前端使用beforeRouteEnter也能实现登陆拦截，超简单

最新推荐文章于 2025-03-07 15:49:12 发布

shmily...

最新推荐文章于 2025-03-07 15:49:12 发布

阅读量3.2k

点赞数

文章标签： vue 登陆拦截 beforeRouteEnter

本文链接：https://blog.csdn.net/weixin_43842567/article/details/99679224

版权

本文介绍如何在Vue项目中使用beforeRouteEnter钩子函数实现登录状态检查，确保未登录用户不能访问受保护的页面。通过在main.vue中设置路由守卫，检查sessionStorage中的用户名，若未登录则跳转至登录页并给出警告提示。

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

beforeRouteEnter(to, from, next)：进入路由之前执行的函数,写在main.vue里实现登陆拦截。

1、首先在登录接口请求成功后，将后台返回的用户名存到sessionStorage里
2、在main.vue里使用钩子函数beforeRouteEnter(to, from, next)

beforeRouteEnter(to, from, next) {    
      if(sessionStorage.getItem("username")) {     //如果sessionstorage里存了用户名，则表示已登录
        next(true);
      }else {
        next(vm => {    // 通过 `vm` 访问组件实例 ，直接用this是有指向问题的   
          vm.$router.push('/');
          vm.$message({       //这里是elementUI的message提示，按自己需求来写就行
            message: '请先登录！',
            type: 'warning'
          });
        })

      }
    },