一、概念
拦截器分为两种:
请求拦截器 和 响应拦截器
请求拦截器一般会统一在请求头中添加token;响应拦截器一般会处理异常错误信息,以及遇到401后跳转登录页
拦截器的作用主要是在axios请求和响应之前拦截请求
二、应用场景
1、请求拦截器应用场景:
可以给所有的axios请求设置请求头
(1)不使用拦截器: 我们需要手动给页面每一个axios都设置请求头
(2)使用拦截器: 只需要在拦截器中给axios设置请求头即可(因为所有的axios请求都会先进入请求拦截器)
语法:
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 本地有token就在请求头添加token
if (localStorage.getItem('token')) {
config.headers.Authorization = localStorage.getItem('token')
}
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
})
2、响应拦截器应用场景:
(1)拦截401,如果遇到401错误就可以直接跳转登录页
(2)对请求错误统一处理:弹出提示框
语法:
// 添加响应拦截器
axios.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response
},
function (error) {
// 对响应错误做点什么
// 如果是401错误,说明token没有 或 过期,就跳转登录页
if (error.response.status === 401) {
// 删除过期的token
localStorage.removeItem('token')
alert('请先登录')
location.href = './login.html'
} else {//其他的错误,就弹出提示框
Toast.fail(error.response.data.message)
}
return Promise.reject(error)
})