access_token
作用:获取需要授权的接口数据
expires_in
作用:access_token 过期的时间
refresh_token
作用:刷新获取新的 access_token
为什么access_token需要有过期时间以及比较短
为了安全
怎么处理?
方法一:
在请求发起拦截每个请求,判断token的有效时间是否已经过期,若已过期,则讲请求挂起,先刷新token后再继续请求
优点:在请求前拦截,能节省请求,省流量
缺点:需要后端额外提供一个token过期时间的字段;使用了本地时间判断,若本地时间被篡改,特别是本地时间比服务器时间慢时,拦截会失败
方法二:
不在请求前拦截,而是拦截返回后的数据。先发起请求,接口返回过期后,先刷新token,再进行一次重试
优点:不需要额外的token过期字段,不需判断时间
缺点:会消耗多一次请求,耗流量
综上所述,方法一和方法二优缺点是互补的,方法一有校验失败的风险(本地时间被篡改时),方法二更简单粗暴,等知道服务器已经过期了再重试一次,只是消耗多一个请求
代码案例
import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
import router from '@/router'
import qs from 'qs'
const request = axios.create({
// 配置选项
// baseURL,
// timeout
})
function redirectLogin () {
router.push({
name: 'login',
query: {
redirect: router.currentRoute.fullPath
}
})
}
function refreshToken () {
return axios.create()({
method: 'POST',
url: '/front/user/refresh_token',
data: qs.stringify({
// refresh_token 只能使用1次
refreshtoken: store.state.user.refresh_token
})
})
}
// 请求拦截器
// Add a request interceptor
request.interceptors.request.use(function (config) {
// console.log('接口请求进来了', config)
// 通过改写 config 配置信息来实现业务逻辑功能的统一处理
const { user } = store.state
if (user && user.access_token) {
config.headers.Authorization = user.access_token
}
// 注意:这里一定要返回 config,发欧洲请求就发布出去
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// 响应拦截器
let isRfreshing = false // 控制刷新 token 状态
let requests: any[] = [] // 储存刷新 token 期间过来的401请求
request.interceptors.response.use(function (response) {
// 状态码为2xx 进入这里
// console.log('请求响应成功了 => ', response)
// 如果是自定义错误状态,错误处理就写到这里
return response
}, async function (error) {
if (error.response) {
// 请求收到响应了,但是状态超出了 2xx 的范围
const { status } = error.response
if (status === 400) {
Message.error('请求参数错误')
} else if (status === 401) {
// token无效
if (!store.state.user) {
redirectLogin()
return Promise.reject(error)
}
// 刷新token
if (!isRfreshing) {
isRfreshing = true // 开启刷新状态
// 尝试刷新获取新的token
return refreshToken().then(res => {
if (!res.data.success) {
throw new Error('刷新 Token 失败')
}
// 刷新token 成功了
store.commit('setUser', res.data.content)
// 把requests 队列中的请求重新发送出去
return request(error.config)
requests.forEach(cb => cb());
// 重置 request数组
requests = []
}).catch(err => {
console.log(err)
store.commit('setUser', null)
redirectLogin()
return Promise.reject(error)
}).finally(() => {
isRfreshing = false
})
}
// 刷新状态下,把请求挂起放到 requests 数组中
return new Promise(resolve => {
requests.push(() => {
resolve(request(error.config))
})
})
} else if (status === 403) {
Message.error('没有权限,请联系管理员')
} else if (status === 404) {
Message.error('请求资源不存在')
} else if (status >= 500) {
Message.error('服务端错误,请联系管理员')
}
} else if (error.request) {
// 请求发出去没有收到响应
// console.log(error.request);
Message.error('请求超时,请刷新重试')
} else {
// 在设置请求时发生的错误
// console.log('Error', error.message);
Message.error(`请求失败:${error.message}`)
}
console.log(error.config);
// 把请求失败的错误对象继续抛出,扔给下一个上一个调用者
return Promise.reject(error);
})
export default request