这篇文章主要为大家详细介绍了浅谈Vue网络请求之interceptors实际应用,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
最近在项目开发中,遇到下面这样一个问题:
需求分析
分析完问题后,我们来实现功能
安装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
let token = sessionStorage.getItem('access_token')
let csrf = 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'
}
}
return config
},
error => {
return Promise.reject(error)
}
)
在 response 拦截器实现
代码如下:
axios.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)
}
)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持四海网。
本文来自:http://www.q1010.com/184/4516-0.html
注:关于浅谈Vue网络请求之interceptors实际应用的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。