1.token过期时间是8h,起一个setInterval间隔30m刷新一次,判断时间超过7.5h请求后台接口刷新token(会存在时间差,不靠谱)
setToken('token',{token:'qwe',date:new Date().getTime()})
this.timer = setInterval(function(){
console.log(getToken('token'))
if(getToken('token')){
let data = JSON.parse(getToken('token'))
let time = data.date;
let now_time = new Date().getTime();
console.log(now_time - time)
if((now_time - time)>20*1000){
console.log('here')
setToken('token',{token:'qwe',date:new Date().getTime()})
}
}
},6*1000)
2.在axios拦截器里对将要过期的token 的进行刷新
1.在发送请求前处理
2.在发送请求后处理
考虑点:1.多个请求同时发送token已过期处理
2.登录注册token为空(发送请求前)
我自己采用的在发送请求后处理
import axios from 'axios'
import {Message} from 'element-ui'
import { setToken,getToken } from '../utils/auth'
axios.defaults.withCredentials = true
axios.defaults.baseURL = process.env.VUE_APP_URL
axios.defaults.headers = {
'X-Token':getToken('token') //设置header
}
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
console.log(config)
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
console.log(response)
if(response.data.code==415){
// token 过期
checkStatus(response)
}
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
console.log(error)
return Promise.reject(error);
});
let isRefreshing = true; // 默认状态
function checkStatus(response){
// 刷新token的函数,这需要添加一个开关,防止重复请求
if(isRefreshing){
refreshTokenRequst()
}
isRefreshing = false;
// 将当前的请求保存在观察者数组中
if(!isRefreshing){
// 正在刷新token,将返回一个未执行resolve的promise
const retryOriginalRequest = new Promise((resolve) => {
addSubscriber(()=> {
console.log(response.config)
response.config.headers['X-Token'] = getToken('token');
response.config.baseURL = '';
resolve(axios(response.config))
})
});
return retryOriginalRequest;
}
}
// 刷新token接口
function refreshTokenRequst(){
// axios.get().then(res=>{
// console.log(res)
// setToken()
// onAccessTokenFetched()
// isRefreshing = true;
// })
setTimeout(()=>{
setToken('token','$2y$10$G82RnwrGOuvqIpIR0JeH3O0N3B5m.fDCoCvFkWEgA9zE68BL09tTy')
isRefreshing = true;
onAccessTokenFetched()
},2000)
}
// 观察者
let subscribers = [];
// 已经刷新了token,将所有队列中的请求进行重试
function onAccessTokenFetched() {
subscribers.forEach((callback)=>{
callback();
})
subscribers = [];
}
// 将resolve放进队列,用一个函数形式来保存,等token刷新后直接执行
function addSubscriber(callback) {
subscribers.push(callback)
}
参考链接 https://segmentfault.com/a/1190000020986592?utm_source=tag-newest