浅谈Vue网络请求之interceptors实际应用
发布时间：2020-12-17 02:33:40 所属栏目：百科 来源：网络整理
导读：项目背景 最近在项目开发中，遇到下面这样一个问题： 在进行铭感操作之前，每个请求需要携带token,但是token 有有效期，token 失效后需要换取新的token并继续请求。 需求分析 每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，在这里，我
项目背景最近在项目开发中，遇到下面这样一个问题：
需求分析
功能实现分析完问题后，我们来实现功能 安装axios,这里我们就赘述怎么安装axios. 在 main.js 注册 axios 注：qs，使用axios，必须得安装 qs，所有的Post 请求，我们都需要 qs,对参数进行序列化。 在 request 拦截器实现 {
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 拦截器实现 {
// 定时刷新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)
}
)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |