P0-1: Token refresh race condition — reject all pending requests on refresh failure
P0-2: Remove X-Forwarded-For trust in rate limiting — use only ConnectInfo IP
P1-3: Template grid reactive — use useSaaSStore() hook instead of getState()
P1-4: Agent Template detail modal — show emoji, personality, soul_content, welcome_message,
communication_style, source_id, scenarios, version
P1-5: adminRouting parse validation — type-safe llm_routing extraction from localStorage
P1-6: Remove unused @ant-design/charts dependency
P1-extra: Type addKeyMutation data parameter (replace any)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
148 lines
4.7 KiB
TypeScript
148 lines
4.7 KiB
TypeScript
// ============================================================
|
||
// ZCLAW Admin V2 — Axios 实例 + JWT 拦截器
|
||
// ============================================================
|
||
//
|
||
// 认证策略: 主路径使用 HttpOnly cookie(浏览器自动附加),
|
||
// Authorization header 作为 fallback 保留用于 API 客户端。
|
||
|
||
import axios from 'axios'
|
||
import type { AxiosError, InternalAxiosRequestConfig } from 'axios'
|
||
import type { AxiosRequestConfig } from 'axios'
|
||
import type { ApiError } from '@/types'
|
||
import { useAuthStore } from '@/stores/authStore'
|
||
|
||
const BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api/v1'
|
||
const TIMEOUT_MS = 30_000
|
||
|
||
/** API 业务错误 */
|
||
export class ApiRequestError extends Error {
|
||
constructor(
|
||
public status: number,
|
||
public body: ApiError,
|
||
) {
|
||
super(body.message || `Request failed with status ${status}`)
|
||
this.name = 'ApiRequestError'
|
||
}
|
||
}
|
||
|
||
const request = axios.create({
|
||
baseURL: BASE_URL,
|
||
timeout: TIMEOUT_MS,
|
||
headers: { 'Content-Type': 'application/json' },
|
||
withCredentials: true, // 发送 HttpOnly cookies
|
||
})
|
||
|
||
// ── 请求拦截器:附加 Authorization header fallback ──────────
|
||
|
||
request.interceptors.request.use((config: InternalAxiosRequestConfig) => {
|
||
const token = useAuthStore.getState().token
|
||
if (token) {
|
||
config.headers.Authorization = `Bearer ${token}`
|
||
}
|
||
return config
|
||
})
|
||
|
||
// ── 响应拦截器:401 自动刷新 ──────────────────────────────
|
||
|
||
let isRefreshing = false
|
||
let pendingRequests: Array<{
|
||
resolve: (token: string) => void
|
||
reject: (error: unknown) => void
|
||
}> = []
|
||
|
||
function onTokenRefreshed(newToken: string) {
|
||
pendingRequests.forEach(({ resolve }) => resolve(newToken))
|
||
pendingRequests = []
|
||
}
|
||
|
||
function onTokenRefreshFailed(error: unknown) {
|
||
pendingRequests.forEach(({ reject }) => reject(error))
|
||
pendingRequests = []
|
||
}
|
||
|
||
request.interceptors.response.use(
|
||
(response) => response,
|
||
async (error: AxiosError<{ error?: string; message?: string }>) => {
|
||
const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean }
|
||
|
||
// 401 → 尝试刷新 Token
|
||
if (error.response?.status === 401 && !originalRequest._retry) {
|
||
const store = useAuthStore.getState()
|
||
if (!store.refreshToken) {
|
||
store.logout()
|
||
window.location.href = '/login'
|
||
return Promise.reject(error)
|
||
}
|
||
|
||
if (isRefreshing) {
|
||
return new Promise((resolve, reject) => {
|
||
pendingRequests.push({
|
||
resolve: (newToken: string) => {
|
||
originalRequest.headers.Authorization = `Bearer ${newToken}`
|
||
resolve(request(originalRequest))
|
||
},
|
||
reject,
|
||
})
|
||
})
|
||
}
|
||
|
||
originalRequest._retry = true
|
||
isRefreshing = true
|
||
|
||
try {
|
||
const res = await axios.post(`${BASE_URL}/auth/refresh`, null, {
|
||
headers: { Authorization: `Bearer ${store.refreshToken}` },
|
||
withCredentials: true, // 发送 refresh cookie
|
||
})
|
||
const newToken = res.data.token as string
|
||
const newRefreshToken = res.data.refresh_token as string
|
||
// 更新内存中的 token(实际认证通过 HttpOnly cookie,浏览器已自动更新)
|
||
store.setToken(newToken)
|
||
if (newRefreshToken) {
|
||
store.setRefreshToken(newRefreshToken)
|
||
}
|
||
onTokenRefreshed(newToken)
|
||
originalRequest.headers.Authorization = `Bearer ${newToken}`
|
||
return request(originalRequest)
|
||
} catch (refreshError) {
|
||
// 关键修复:刷新失败时 reject 所有等待中的请求,避免它们永远 hang
|
||
onTokenRefreshFailed(refreshError)
|
||
store.logout()
|
||
window.location.href = '/login'
|
||
return Promise.reject(refreshError)
|
||
} finally {
|
||
isRefreshing = false
|
||
}
|
||
}
|
||
|
||
// 构造 ApiRequestError
|
||
if (error.response) {
|
||
const body: ApiError = {
|
||
error: error.response.data?.error || 'unknown',
|
||
message: error.response.data?.message || `请求失败 (${error.response.status})`,
|
||
status: error.response.status,
|
||
}
|
||
return Promise.reject(new ApiRequestError(error.response.status, body))
|
||
}
|
||
|
||
// 网络错误统一包装为 ApiRequestError
|
||
return Promise.reject(
|
||
new ApiRequestError(0, {
|
||
error: 'network_error',
|
||
message: error.message || '网络连接失败,请检查网络后重试',
|
||
status: 0,
|
||
})
|
||
)
|
||
},
|
||
)
|
||
|
||
export default request
|
||
|
||
/** 将 AbortSignal 注入 Axios config,用于 TanStack Query 的请求取消 */
|
||
export function withSignal(config: AxiosRequestConfig = {}, signal?: AbortSignal): AxiosRequestConfig {
|
||
if (signal) {
|
||
return { ...config, signal }
|
||
}
|
||
return config
|
||
}
|