axios的拦截器包括请求拦截器，和响应拦截器 1.请求拦截器在请求发送前进行必要操作处理，例如添加统一cookie、token，请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装； 2.响应拦截器同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。 添加拦截器的方式有两种，一种是直接在axios的原型下直接更改，一种是更改axios.create出来的实例，后续抛出实例，使用实例进行请求。 接下来展示实例抛出
请求拦截器
const service = axios.create({
timeout: 5000,
baseUrl: '/service',
})
service.interceptors.request.use(
req => {
// 一下是携带token的过程
req.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
let token = sessionStorage.getItem('access_token')
let csrf = store.getters.csrf
if (token) {
req.headers = {
'access-token': token,
'Content-Type': 'application/x-www-form-urlencoded'
}
}
return req
},
error => {
return Promise.reject(error)
}
)
响应拦截器
const service = axios.create({
timeout: 5000,
baseUrl: '/service',
})
service.interceptors.response.use(
response => {
// 定时刷新access-token
if (!response.data.value && response.data.data.message === 'token invalid') {
// 刷新token
store.dispatch('refresh').then(response => {
sessionStorage.setItem('access_token', response.data)
}).catch(error => {
throw new Error('token刷新' + error)
})
}
return response
},
error => {
return Promise.reject(error)
}
)
