封装axios请求，无痛刷新token

思路如下：

 

1. 在响应拦截器拦截token失效code，根据code判断是否把响应return到页面

 

 

 注意：37行一定要return，否则再次重发请求时，页面拿到数据无法重新渲染

2. 调用refresh，获取新的token，重新调用上次失败的接口

 

 注意：43行，上次请求把参数的json对象转化为json字符串，需要重新修改一下请求参数的格式，否则会报错

            44行是重新发送之前失败的接口，重新获取数据

完整代码如下：

import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import { refreshToken } from './modules/industrialMarket'
import { Toast } from 'vant'
Vue.use(Toast)
// 使用由库提供的配置的默认值来创建实例
const instance = axios.create({
baseURL: process.env.VUE_APP_BASEURL,
timeout: 60000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
// 添加请求拦截器
instance.interceptors.request.use(
function (config) {
// 添加请求公共参数
getUserInfo(config)
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)

// 添加响应拦截器
instance.interceptors.response.use(
function (response) {
let res = response.data
// 对响应数据做点什么
console.log('接口响应===>', response.config.url, response.data)
if (res.code === '101002') {
// 在这里调用刷新token接口
return getRefreshToken(data)
.then(res => {
if (res && res.accessToken) {
// 更新token
store.dispatch('loadUserInfo', {
accessToken: res.accessToken
})
// 重新调接口
response.config.data = JSON.parse(response.config.data)
return instance(response.config)
}
})
.catch(err => {
console.log(err)
})
} else {
// 抛出到页面渲染
return res
}
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error)
}
)
// 获取公共请求参数
function getUserInfo (config) {
// 请求之前添加account
const userInfo = store.state.userInfo
if (userInfo && userInfo.account) {
config.headers.Authorization = userInfo.accessToken
config.data.account = userInfo.account
config.data.regionCdList = userInfo.regionCdList
}
}
// token刷新接口
function getRefreshToken (data) {
const resParams = {
code: data.code
}
return refreshToken(resParams).then(res => res.data)
}
export default instance