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

1 分类

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

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

2 作用

路由守卫作用：

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

拦截器的作用：

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

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

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

对于路由守卫：

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

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

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

组件内守卫：

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

拦截器呢通常对http请求进行处理，axios当然对处理前台与后台的数据交互，需要进行防御等

页面发送http请求，很多情况我们要对请求和其响应进行特定的处理；例如每个请求都附带后端返回的token，拿到response之前loading动画的展示等。

当然如果请求数非常多，这样处理起来会非常的麻烦，程序的优雅性也会大打折扣。在这种情况下，axios为开发者提供了这样一个API：拦截器。

4 应用

路由守卫应用请看我的另一篇文章有讲解

链接：https://blog.csdn.net/qq_19594239/article/details/119988482?spm=1001.2014.3001.5501

axios.interceptors.rquest.use((config) =>{1.获取tokenlet token = '123321'2.判断if(config.url != /user/login && token){config.headers['Authorization'] = token}return config
},(error) =>{return Promise.reject(error)
})

axios.interceptors.response.use((response) =>{response = {...response,data: response.data.data,statusText: response.data.message }return Promise.reject(error)
})

instance1({method: 'post',url:'/user/login',data:loginData,
}).then(res => {console.log(res)
})

setTimeout(() =>{axios.interceptors.response.request.eject(inteceptor)
axios.post('/user/login',loginData).then(res =>{console.log(res)},3000)
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！