|
|
|
|
@ -6,10 +6,14 @@
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
class TokenService {
|
|
|
|
|
__root = ''
|
|
|
|
|
constructor() {
|
|
|
|
|
this.tokenKey = 'access';
|
|
|
|
|
this.refreshTokenKey = 'refresh';
|
|
|
|
|
}
|
|
|
|
|
setRoot(root) {
|
|
|
|
|
this.__root = root;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setToken(token) {
|
|
|
|
|
localStorage.setItem(this.tokenKey, token);
|
|
|
|
|
@ -27,7 +31,7 @@ class TokenService {
|
|
|
|
|
return localStorage.getItem(this.refreshTokenKey);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
clearTokens() {
|
|
|
|
|
clearToken() {
|
|
|
|
|
localStorage.removeItem(this.tokenKey);
|
|
|
|
|
localStorage.removeItem(this.refreshTokenKey);
|
|
|
|
|
}
|
|
|
|
|
@ -54,24 +58,19 @@ class TokenService {
|
|
|
|
|
}
|
|
|
|
|
return this.__cache
|
|
|
|
|
}
|
|
|
|
|
logout(root) {
|
|
|
|
|
console.log(this)
|
|
|
|
|
root = root || this.__root
|
|
|
|
|
this.clearTokens();
|
|
|
|
|
location.href = root + '/login?redirect=' + window.location.pathname;
|
|
|
|
|
logout() {
|
|
|
|
|
this.clearToken();
|
|
|
|
|
location.href = this.__root + '/login?redirect=' + window.location.pathname;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
__root = ''
|
|
|
|
|
async refreshToken(root) {
|
|
|
|
|
root = root || this.__root
|
|
|
|
|
this.__root = root
|
|
|
|
|
async refreshToken() {
|
|
|
|
|
const refreshToken = this.getRefreshToken();
|
|
|
|
|
if (!refreshToken) {
|
|
|
|
|
// this.logout()
|
|
|
|
|
this.logout()
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
let data = await fetch(root + '/api/token', {
|
|
|
|
|
let data = await fetch(this.__root + '/api/token', {
|
|
|
|
|
method: 'post',
|
|
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
|
|
body: JSON.stringify({ refresh: refreshToken })
|
|
|
|
|
@ -79,11 +78,11 @@ class TokenService {
|
|
|
|
|
if (data.code === 0) {
|
|
|
|
|
this.setToken(data.data);
|
|
|
|
|
} else {
|
|
|
|
|
this.clearTokens()
|
|
|
|
|
this.clearToken()
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error('Token刷新失败:', e);
|
|
|
|
|
this.clearTokens()
|
|
|
|
|
this.clearToken()
|
|
|
|
|
// logout();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -94,21 +93,122 @@ class TokenService {
|
|
|
|
|
const currentTime = Date.now() / 1000;
|
|
|
|
|
return decoded.exp < currentTime;
|
|
|
|
|
}
|
|
|
|
|
fetch() {
|
|
|
|
|
let that = this
|
|
|
|
|
return (url, options) => {
|
|
|
|
|
const token = that.getToken();
|
|
|
|
|
if (token) {
|
|
|
|
|
if (!options) {
|
|
|
|
|
options = {};
|
|
|
|
|
wrapAxios(instance) {
|
|
|
|
|
|
|
|
|
|
// 定义一个标志，用于防止在刷新令牌时发送多个刷新请求
|
|
|
|
|
let isRefreshing = false;
|
|
|
|
|
// 定义一个队列，用于存储在刷新令牌期间失败的请求
|
|
|
|
|
let failedQueue = [];
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 处理等待队列中的请求。
|
|
|
|
|
* 刷新令牌成功后，将队列中的请求重新发送；刷新失败则拒绝这些请求。
|
|
|
|
|
* @param {Error|null} error - 如果刷新令牌失败，则为错误对象。
|
|
|
|
|
* @param {string|null} token - 刷新成功后获取的新令牌。
|
|
|
|
|
*/
|
|
|
|
|
const processQueue = (error, token = null) => {
|
|
|
|
|
failedQueue.forEach(prom => {
|
|
|
|
|
if (error) {
|
|
|
|
|
// 刷新失败，拒绝队列中的所有请求
|
|
|
|
|
prom.reject(error);
|
|
|
|
|
} else {
|
|
|
|
|
// 刷新成功，使用新令牌解决队列中的所有请求
|
|
|
|
|
prom.resolve(token);
|
|
|
|
|
}
|
|
|
|
|
if (!options.headers) {
|
|
|
|
|
options.headers = {};
|
|
|
|
|
});
|
|
|
|
|
// 清空队列
|
|
|
|
|
failedQueue = [];
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 请求拦截器：在发送请求前添加认证令牌
|
|
|
|
|
instance.interceptors.request.use(config => {
|
|
|
|
|
const token = this.getToken();
|
|
|
|
|
if (token) {
|
|
|
|
|
config.headers.Authorization = `Bearer ${token}`;
|
|
|
|
|
}
|
|
|
|
|
options.headers.Authorization = `Bearer ${token}`;
|
|
|
|
|
return config;
|
|
|
|
|
}, error => {
|
|
|
|
|
// 对请求错误做些什么
|
|
|
|
|
return Promise.reject(error);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let that = this
|
|
|
|
|
// 响应拦截器：处理响应数据，特别是针对 401 状态码进行令牌刷新和重试
|
|
|
|
|
instance.interceptors.response.use((response) => {
|
|
|
|
|
// 任何 2xx 范围内的状态码都会触发此函数
|
|
|
|
|
// 这里可以添加其他全局的成功响应处理逻辑
|
|
|
|
|
return response;
|
|
|
|
|
}, async function(error) {
|
|
|
|
|
// 任何超出 2xx 范围的状态码都会触发此函数
|
|
|
|
|
const originalRequest = error.config;
|
|
|
|
|
console.log(error)
|
|
|
|
|
|
|
|
|
|
// 检查错误响应状态码是否为 401 (未授权)
|
|
|
|
|
// 并且确保这不是一个已经重试过的请求 (通过 originalRequest._retry 标记)
|
|
|
|
|
if (error.response && error.response.status === 401 && !originalRequest._retry) {
|
|
|
|
|
// 标记此请求为已重试，避免无限循环
|
|
|
|
|
originalRequest._retry = true;
|
|
|
|
|
|
|
|
|
|
// 统计该请求的重试次数
|
|
|
|
|
originalRequest.__retryCount = originalRequest.__retryCount || 0;
|
|
|
|
|
originalRequest.__retryCount++;
|
|
|
|
|
|
|
|
|
|
// 如果重试次数超过 3 次，则不再重试，直接跳转到登录页
|
|
|
|
|
if (originalRequest.__retryCount >= 3) {
|
|
|
|
|
that.clearToken();
|
|
|
|
|
// 跳转到登录页，并带上当前页面的路径作为重定向参数
|
|
|
|
|
window.location.href = that.__root + '/login?redirect=' + window.location.pathname;
|
|
|
|
|
// 拒绝原始请求的 Promise，停止后续处理
|
|
|
|
|
return Promise.reject(error);
|
|
|
|
|
}
|
|
|
|
|
return fetch(url, options);
|
|
|
|
|
|
|
|
|
|
// 如果当前正在进行令牌刷新
|
|
|
|
|
if (isRefreshing) {
|
|
|
|
|
// 将当前失败的请求添加到队列中，等待新令牌
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
failedQueue.push({ resolve, reject: (err) => { throw err; } });
|
|
|
|
|
}).then(token => {
|
|
|
|
|
// 刷新成功后，使用新令牌更新请求头
|
|
|
|
|
originalRequest.headers.Authorization = `Bearer ${token}`;
|
|
|
|
|
// 重新发送原始请求
|
|
|
|
|
return instance(originalRequest);
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
// 如果队列中的请求被拒绝，则抛出错误
|
|
|
|
|
return Promise.reject(err);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 如果没有正在进行令牌刷新，则设置标志为 true，开始刷新
|
|
|
|
|
isRefreshing = true;
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
// 发送请求来刷新令牌
|
|
|
|
|
await that.refreshToken();
|
|
|
|
|
const newToken = that.getToken();
|
|
|
|
|
|
|
|
|
|
// 更新原始请求的 Authorization 头为新的令牌
|
|
|
|
|
originalRequest.headers.Authorization = `Bearer ${newToken}`;
|
|
|
|
|
// 处理等待队列中的所有请求，用新的令牌重新发送
|
|
|
|
|
processQueue(null, newToken);
|
|
|
|
|
// 重新发送最初导致 401 错误的请求
|
|
|
|
|
return instance(originalRequest);
|
|
|
|
|
} catch (refreshError) {
|
|
|
|
|
// 如果刷新令牌本身也失败了 (例如，refresh token 已过期)
|
|
|
|
|
// 清除本地令牌
|
|
|
|
|
that.clearToken();
|
|
|
|
|
// 拒绝等待队列中的所有请求
|
|
|
|
|
processQueue(refreshError);
|
|
|
|
|
that.logout();
|
|
|
|
|
// 拒绝原始请求的 Promise
|
|
|
|
|
return Promise.reject(refreshError);
|
|
|
|
|
} finally {
|
|
|
|
|
// 无论成功或失败，最后都要将刷新标志重置为 false
|
|
|
|
|
isRefreshing = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// 对于其他类型的错误，或不是需要重试的 401 错误，直接拒绝 Promise
|
|
|
|
|
return Promise.reject(error);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
veypi
4 months ago