Vue路由守卫与axios拦截器的对比

最新推荐文章于 2025-07-13 11:06:19 发布

一个佛系的小白

最新推荐文章于 2025-07-13 11:06:19 发布

阅读量1.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue3 前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_46285310/article/details/119987802

本文对比了Vue的路由守卫和axios的拦截器，解释了它们的分类、作用、作用点及应用场景。路由守卫包括全局、独享和组件内守卫，用于权限验证和操作防护。拦截器主要用于HTTP请求的处理，如添加令牌和显示加载动画。两者都是安全保障，适用于不同场景。

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

1 分类

路由守卫：全局路由守卫，路由独享守卫，路由组件内守卫

拦截器：请求拦截器(request)，响应拦截器(response)

2 作用

路由守卫作用：

先说我的理解，路由守卫类似一个安保系统，要向进入园区，必须经过安保的同意，同意了就放行，继续操作，那么路由守卫也是一样的

拦截器的作用：

我的理解是拦截请求和响应，比如在登录一个页面的时候，当用户不输入密码或者输入错误，或者想要跳过这步操作，就会进行拦截，让你进行一个登录的操作，当然重定向也可以实现

共同点：都是对操作进行防护，都类似一个安保系统，对不安全的操作进行防卫，就比如登录页面，只有通过登录才可以进行之后的操作，那么路由守卫和拦截器都能够实现这一操作

3 作用点(什么时候该用什么)

对于路由守卫：

全局前置守卫：用于验证token是否有效，开启进度条

全局后置守卫：关闭进度条

路由独享守卫：进入当前路由要干啥就在这里处理，如该车间就该做该车间该做的事情

组件内守卫：

beforeRouteEnter(to, from, next) {
    console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
    next((vm) => {
      console.log('组件内路由前置守卫 vm', vm) // vm 就是this
    })
  },
  beforeRouteUpdate(to