浅谈Vue网络请求之interceptors实际应用
项目背景
最近在项目开发中，遇到下面这样一个问题：
- 在进行铭感操作之前，每个请求需要携带token,但是token有有效期，token失效后需要换取新的token并继续请求。
需求分析
- 每个请求都需要携带token，所以我们可以使用axiosrequest拦截器，在这里，我们给每个请求都加token,这样就可以节省每个请求再一次次的复制粘贴代码。
- token失效问题，当我们token失效，我们服务端会返回一个特定的错误表示，比如tokeninvalid，但是我们不能在每个请求之后去做刷新token的操作呀，所以这里我们就用axiosresponse拦截器，我们统一处理所有请求成功之后响应过来的数据，然后对特殊数据进行处理，其他的正常分发。
功能实现
分析完问题后，我们来实现功能
安装axios,这里我们就赘述怎么安装axios.
在main.js注册axios
Vue.use(Vuex) Vue.use(VueAxios,axios) Vue.use(qs)
注：qs，使用axios，必须得安装qs，所有的Post请求，我们都需要qs,对参数进行序列化。
在request拦截器实现
axios.interceptors.request.use(
config=>{
config.baseURL='/api/'
config.withCredentials=true//允许携带token,这个是解决跨域产生的相关问题
config.timeout=2500
lettoken=sessionStorage.getItem('access_token')
letcsrf=store.getters.csrf
if(token){
config.headers={
'access-token':token,
'Content-Type':'application/x-www-form-urlencoded'
}
}
if(config.url==='refresh'){
config.headers={
'refresh-token':sessionStorage.getItem('refresh_token'),
'Content-Type':'application/x-www-form-urlencoded'
}
}
returnconfig
},
error=>{
returnPromise.reject(error)
}
)
在response拦截器实现
axios.interceptors.response.use(
response=>{
//定时刷新access-token
if(!response.data.value&&response.data.data.message==='tokeninvalid'){
//刷新token
store.dispatch('refresh').then(response=>{
sessionStorage.setItem('access_token',response.data)
}).catch(error=>{
thrownewError('token刷新'+error)
})
}
returnresponse
},
error=>{
returnPromise.reject(error)
}
)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。