feat(api): implement token auto-refresh mechanism and enhance token management
Some checks failed
Frontend CI / ota-android (push) Successful in 10m55s
Frontend CI / build-and-push-web (push) Failing after 13m25s
Frontend CI / build-android-apk (push) Successful in 56m26s

- Add support for proactive token refresh when nearing expiration to improve user experience.
- Introduce a refresh lock to prevent concurrent token refresh requests.
- Update token handling in API client to ensure valid tokens are used for requests.
- Modify authService to handle refresh token requests with improved error handling and response management.
This commit is contained in:
lafay
2026-03-23 00:34:26 +08:00
parent cee120a6f8
commit 88510aa6ae
2 changed files with 114 additions and 8 deletions

View File

@@ -2,6 +2,7 @@
* API 客户端 * API 客户端
* 使用 fetch API 进行 HTTP 请求 * 使用 fetch API 进行 HTTP 请求
* 支持请求/响应拦截器 * 支持请求/响应拦截器
* 支持主动刷新 token快过期时自动刷新
*/ */
import AsyncStorage from '@react-native-async-storage/async-storage'; import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -24,6 +25,9 @@ const SSE_URL = `${BASE_URL.replace(/\/+$/, '')}/realtime/sse`;
const TOKEN_KEY = 'auth_token'; const TOKEN_KEY = 'auth_token';
const REFRESH_TOKEN_KEY = 'refresh_token'; const REFRESH_TOKEN_KEY = 'refresh_token';
// Token 提前刷新阈值(秒):提前 5 分钟刷新
const TOKEN_REFRESH_THRESHOLD_SECONDS = 5 * 60;
// API 响应格式 // API 响应格式
export interface ApiResponse<T> { export interface ApiResponse<T> {
code: number; code: number;
@@ -53,10 +57,21 @@ export class ApiError extends Error {
} }
} }
// JWT Payload 结构
interface JwtPayload {
user_id: string;
username: string;
exp?: number;
iat?: number;
iss?: string;
}
// API 客户端类 // API 客户端类
class ApiClient { class ApiClient {
private baseUrl: string; private baseUrl: string;
private navigation: any = null; private navigation: any = null;
// 刷新锁:防止并发刷新
private refreshLock: Promise<boolean> | null = null;
constructor(baseUrl: string) { constructor(baseUrl: string) {
this.baseUrl = baseUrl; this.baseUrl = baseUrl;
@@ -67,6 +82,33 @@ class ApiClient {
this.navigation = navigation; this.navigation = navigation;
} }
// 解析 JWT token 获取 payload
private parseJwt(token: string): JwtPayload | null {
try {
const parts = token.split('.');
if (parts.length !== 3) {
return null;
}
// React Native/Expo 环境使用 atob
const payload = JSON.parse(atob(parts[1]));
return payload as JwtPayload;
} catch {
return null;
}
}
// 检查 token 是否快过期(返回 true 表示需要刷新)
private isTokenExpiringSoon(token: string): boolean {
const payload = this.parseJwt(token);
if (!payload || !payload.exp) {
return false;
}
const now = Math.floor(Date.now() / 1000);
const remaining = payload.exp - now;
// 剩余时间小于阈值时需要刷新
return remaining < TOKEN_REFRESH_THRESHOLD_SECONDS && remaining > 0;
}
// 获取 token // 获取 token
async getToken(): Promise<string | null> { async getToken(): Promise<string | null> {
try { try {
@@ -137,11 +179,34 @@ class ApiClient {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}; };
// 添加认证 token // 添加认证 token(主动刷新快过期的 token
const token = await this.getToken(); const token = await this.getToken();
if (token) { if (token) {
// 检查 token 是否快过期,如果是则主动刷新
if (this.isTokenExpiringSoon(token)) {
const refreshed = await this.refreshToken();
if (!refreshed) {
// 刷新失败,清除 token 并跳转登录
await this.clearToken();
if (this.navigation) {
this.navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [{ name: 'Login' }],
})
);
}
throw new ApiError(401, '登录已过期,请重新登录');
}
// 刷新成功,使用新 token
const newToken = await this.getToken();
if (newToken) {
headers['Authorization'] = `Bearer ${newToken}`;
}
} else {
headers['Authorization'] = `Bearer ${token}`; headers['Authorization'] = `Bearer ${token}`;
} }
}
// 构建请求配置 // 构建请求配置
const config: RequestInit = { const config: RequestInit = {
@@ -230,8 +295,27 @@ class ApiClient {
} }
} }
// 刷新 token // 刷新 token(带锁,防止并发刷新)
private async refreshToken(): Promise<boolean> { private async refreshToken(): Promise<boolean> {
// 如果已有刷新操作正在进行,等待其完成
if (this.refreshLock) {
return this.refreshLock;
}
// 创建刷新锁
this.refreshLock = this.doRefreshToken();
try {
const result = await this.refreshLock;
return result;
} finally {
// 释放刷新锁
this.refreshLock = null;
}
}
// 实际执行刷新 token
private async doRefreshToken(): Promise<boolean> {
try { try {
const refreshToken = await this.getRefreshToken(); const refreshToken = await this.getRefreshToken();
if (!refreshToken) { if (!refreshToken) {
@@ -242,8 +326,10 @@ class ApiClient {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Authorization': `Bearer ${refreshToken}`,
}, },
body: JSON.stringify({
refresh_token: refreshToken,
}),
}); });
if (!response.ok) { if (!response.ok) {
@@ -309,11 +395,23 @@ class ApiClient {
}); });
} }
// 获取 token 并检查是否需要刷新
const token = await this.getToken(); const token = await this.getToken();
const headers: HeadersInit = {}; const headers: HeadersInit = {};
if (token) { if (token) {
// 检查 token 是否快过期
if (this.isTokenExpiringSoon(token)) {
const refreshed = await this.refreshToken();
if (refreshed) {
const newToken = await this.getToken();
if (newToken) {
headers['Authorization'] = `Bearer ${newToken}`;
}
}
} else {
headers['Authorization'] = `Bearer ${token}`; headers['Authorization'] = `Bearer ${token}`;
} }
}
const response = await fetch(`${this.baseUrl}${path}`, { const response = await fetch(`${this.baseUrl}${path}`, {
method: 'POST', method: 'POST',

View File

@@ -237,7 +237,14 @@ class AuthService {
// 刷新Token // 刷新Token
async refreshToken(): Promise<RefreshTokenResponse | null> { async refreshToken(): Promise<RefreshTokenResponse | null> {
try { try {
const response = await api.post<RefreshTokenResponse>('/auth/refresh'); const refreshToken = await api.getRefreshToken();
if (!refreshToken) {
return null;
}
const response = await api.post<RefreshTokenResponse>('/auth/refresh', {
refresh_token: refreshToken,
});
if (!response.data) { if (!response.data) {
return null; return null;
@@ -245,8 +252,9 @@ class AuthService {
if (response.data.token) { if (response.data.token) {
await api.setToken(response.data.token); await api.setToken(response.data.token);
} }
if (response.data.refreshToken) { const newRefreshToken = response.data.refresh_token || response.data.refreshToken;
await api.setRefreshToken(response.data.refreshToken); if (newRefreshToken) {
await api.setRefreshToken(newRefreshToken);
} }
return response.data; return response.data;