feat(frontend): 对接后端统一响应格式,增强错误处理
- 新增 types/api.ts,定义 ApiResponse/PaginatedData 泛型类型和业务错误码常量 - 增强 request.ts 拦截器:提取后端错误信息、映射 HTTP 状态码和业务错误码为中文提示 - 为 auth/audit/subsystem API 添加泛型返回类型 - 为各视图添加 try/catch 防止未处理的 Promise 拒绝
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import request from './request'
|
||||
import type { ApiResponse, PaginatedData } from '@/types/api'
|
||||
|
||||
export interface LoginAudit {
|
||||
id: number
|
||||
@@ -39,7 +39,7 @@ const mockOpsAudits: OpsAudit[] = [
|
||||
|
||||
export const auditApi = {
|
||||
// 获取登录审计
|
||||
getLoginAudit(params?: any): Promise<any> {
|
||||
getLoginAudit(_params?: any): Promise<ApiResponse<PaginatedData<LoginAudit>>> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
@@ -55,7 +55,7 @@ export const auditApi = {
|
||||
},
|
||||
|
||||
// 获取运维操作审计
|
||||
getOpsAudit(params?: any): Promise<any> {
|
||||
getOpsAudit(_params?: any): Promise<ApiResponse<PaginatedData<OpsAudit>>> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import request from './request'
|
||||
import type { ApiResponse } from '@/types/api'
|
||||
|
||||
export interface LoginRequest {
|
||||
username: string
|
||||
@@ -30,7 +30,7 @@ const mockUser: UserInfo = {
|
||||
|
||||
export const authApi = {
|
||||
// 登录
|
||||
login(data: LoginRequest): Promise<any> {
|
||||
login(_data: LoginRequest): Promise<ApiResponse<LoginResponse>> {
|
||||
// MVP 阶段使用 Mock 数据
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
@@ -48,16 +48,16 @@ export const authApi = {
|
||||
},
|
||||
|
||||
// 登出
|
||||
logout(): Promise<any> {
|
||||
logout(): Promise<ApiResponse<null>> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ code: 0, message: 'success' })
|
||||
resolve({ code: 0, message: 'success', data: null })
|
||||
}, 200)
|
||||
})
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
getUserInfo(): Promise<any> {
|
||||
getUserInfo(): Promise<ApiResponse<UserInfo>> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
|
||||
+45
-10
@@ -1,6 +1,8 @@
|
||||
import axios from 'axios'
|
||||
import axios, { type AxiosResponse, type AxiosError } from 'axios'
|
||||
import { getToken, removeToken } from '@/utils/auth'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { ApiResponse } from '@/types/api'
|
||||
import { codeMessageMap } from '@/types/api'
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: '/api/v1',
|
||||
@@ -21,22 +23,55 @@ request.interceptors.request.use(
|
||||
}
|
||||
)
|
||||
|
||||
/** HTTP 状态码对应的用户友好提示 */
|
||||
const httpMessageMap: Record<number, string> = {
|
||||
400: '请求参数错误',
|
||||
401: '未授权,请重新登录',
|
||||
403: '没有权限执行此操作',
|
||||
404: '请求的资源不存在',
|
||||
408: '请求超时,请稍后重试',
|
||||
500: '服务器内部错误',
|
||||
502: '网关错误',
|
||||
503: '服务暂时不可用,请稍后重试',
|
||||
}
|
||||
|
||||
/** 根据后端错误码获取用户友好提示 */
|
||||
function getBusinessMessage(code: number, fallback?: string): string {
|
||||
return codeMessageMap[code] || fallback || '请求失败'
|
||||
}
|
||||
|
||||
// 响应拦截器
|
||||
request.interceptors.response.use(
|
||||
(response) => {
|
||||
(response: AxiosResponse<ApiResponse>) => {
|
||||
const { data } = response
|
||||
if (data.code !== 0) {
|
||||
ElMessage.error(data.message || '请求失败')
|
||||
return Promise.reject(new Error(data.message))
|
||||
const message = getBusinessMessage(data.code, data.message)
|
||||
ElMessage.error(message)
|
||||
return Promise.reject(new Error(message))
|
||||
}
|
||||
return data
|
||||
return data as any
|
||||
},
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
removeToken()
|
||||
window.location.href = '/login'
|
||||
(error: AxiosError<ApiResponse>) => {
|
||||
// 优先使用后端返回的错误信息
|
||||
const backendMessage = error.response?.data?.message
|
||||
|
||||
if (error.response) {
|
||||
const status = error.response.status
|
||||
|
||||
if (status === 401) {
|
||||
removeToken()
|
||||
window.location.href = '/login'
|
||||
ElMessage.error(backendMessage || '未授权,请重新登录')
|
||||
} else {
|
||||
const message = backendMessage || httpMessageMap[status] || `请求失败 (${status})`
|
||||
ElMessage.error(message)
|
||||
}
|
||||
} else if (error.code === 'ECONNABORTED') {
|
||||
ElMessage.error('请求超时,请检查网络后重试')
|
||||
} else {
|
||||
ElMessage.error('网络连接异常,请检查网络')
|
||||
}
|
||||
ElMessage.error(error.message || '网络错误')
|
||||
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import request from './request'
|
||||
import type { ApiResponse } from '@/types/api'
|
||||
|
||||
export interface Subsystem {
|
||||
id: number
|
||||
@@ -10,6 +10,11 @@ export interface Subsystem {
|
||||
sso_enabled: boolean
|
||||
}
|
||||
|
||||
export interface SSOResponse {
|
||||
sso_url: string
|
||||
expires_in: number
|
||||
}
|
||||
|
||||
// Mock 数据
|
||||
const mockSubsystems: Subsystem[] = [
|
||||
{
|
||||
@@ -70,7 +75,7 @@ const mockSubsystems: Subsystem[] = [
|
||||
|
||||
export const subsystemApi = {
|
||||
// 获取子系统列表
|
||||
getSubsystems(): Promise<any> {
|
||||
getSubsystems(): Promise<ApiResponse<Subsystem[]>> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
@@ -83,7 +88,7 @@ export const subsystemApi = {
|
||||
},
|
||||
|
||||
// 获取 SSO 跳转 URL
|
||||
getSSOUrl(id: number): Promise<any> {
|
||||
getSSOUrl(id: number): Promise<ApiResponse<SSOResponse>> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const subsystem = mockSubsystems.find((s) => s.id === id)
|
||||
|
||||
@@ -97,7 +97,7 @@ const router = createRouter({
|
||||
})
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
router.beforeEach((to, _from, next) => {
|
||||
const token = getToken()
|
||||
|
||||
if (to.meta.requiresAuth !== false && !token) {
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* 后端统一响应格式类型定义
|
||||
* 对应 server/internal/handler/response.go
|
||||
*/
|
||||
|
||||
/** 统一 JSON 响应信封 */
|
||||
export interface ApiResponse<T = any> {
|
||||
/** 业务状态码,0 表示成功 */
|
||||
code: number
|
||||
/** 提示信息 */
|
||||
message: string
|
||||
/** 响应数据 */
|
||||
data: T
|
||||
/** 参数校验错误详情(可选) */
|
||||
details?: Record<string, string[]>
|
||||
}
|
||||
|
||||
/** 分页数据结构 */
|
||||
export interface PaginatedData<T> {
|
||||
total: number
|
||||
items: T[]
|
||||
}
|
||||
|
||||
/** 业务错误码常量,与后端一一对应 */
|
||||
export const ApiCode = {
|
||||
/** 成功 */
|
||||
SUCCESS: 0,
|
||||
/** LDAP 认证失败 */
|
||||
LDAP_AUTH_FAILED: 10001,
|
||||
/** 用户名或密码错误 */
|
||||
INVALID_CREDENTIALS: 10002,
|
||||
/** Token 已过期 */
|
||||
TOKEN_EXPIRED: 10003,
|
||||
/** SSO 未配置 */
|
||||
SSO_NOT_CONFIGURED: 10004,
|
||||
/** SSO 跳转地址生成失败 */
|
||||
SSO_GENERATE_FAILED: 10005,
|
||||
/** 任务创建失败 */
|
||||
TASK_CREATE_FAILED: 20001,
|
||||
/** 任务执行超时 */
|
||||
TASK_EXEC_TIMEOUT: 20002,
|
||||
} as const
|
||||
|
||||
/** 错误码到用户友好提示的映射 */
|
||||
export const codeMessageMap: Record<number, string> = {
|
||||
[ApiCode.LDAP_AUTH_FAILED]: 'LDAP 认证服务异常,请稍后重试',
|
||||
[ApiCode.INVALID_CREDENTIALS]: '用户名或密码错误',
|
||||
[ApiCode.TOKEN_EXPIRED]: '登录已过期,请重新登录',
|
||||
[ApiCode.SSO_NOT_CONFIGURED]: '该子系统未配置 SSO,请联系管理员',
|
||||
[ApiCode.SSO_GENERATE_FAILED]: '生成 SSO 跳转链接失败,请稍后重试',
|
||||
[ApiCode.TASK_CREATE_FAILED]: '创建任务失败,请检查参数后重试',
|
||||
[ApiCode.TASK_EXEC_TIMEOUT]: '任务执行超时,请稍后查看结果',
|
||||
}
|
||||
@@ -33,9 +33,13 @@ const auditData = ref<LoginAudit[]>([])
|
||||
const total = ref(0)
|
||||
|
||||
const fetchData = async () => {
|
||||
const { data } = await auditApi.getLoginAudit()
|
||||
auditData.value = data.items
|
||||
total.value = data.total
|
||||
try {
|
||||
const { data } = await auditApi.getLoginAudit()
|
||||
auditData.value = data.items
|
||||
total.value = data.total
|
||||
} catch {
|
||||
// 错误已由 request 拦截器统一处理
|
||||
}
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
|
||||
@@ -34,9 +34,13 @@ const auditData = ref<OpsAudit[]>([])
|
||||
const total = ref(0)
|
||||
|
||||
const fetchData = async () => {
|
||||
const { data } = await auditApi.getOpsAudit()
|
||||
auditData.value = data.items
|
||||
total.value = data.total
|
||||
try {
|
||||
const { data } = await auditApi.getOpsAudit()
|
||||
auditData.value = data.items
|
||||
total.value = data.total
|
||||
} catch {
|
||||
// 错误已由 request 拦截器统一处理
|
||||
}
|
||||
}
|
||||
|
||||
const refresh = () => {
|
||||
|
||||
@@ -84,8 +84,8 @@ const handleLogin = async () => {
|
||||
await login(form.username, form.password)
|
||||
ElMessage.success('登录成功')
|
||||
router.push('/')
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '登录失败')
|
||||
} catch {
|
||||
// 错误已由 request 拦截器统一处理
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
@@ -24,8 +24,12 @@ import SubsystemCard from '@/components/SubsystemCard.vue'
|
||||
const subsystems = ref<Subsystem[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await subsystemApi.getSubsystems()
|
||||
subsystems.value = data
|
||||
try {
|
||||
const { data } = await subsystemApi.getSubsystems()
|
||||
subsystems.value = data
|
||||
} catch {
|
||||
// 错误已由 request 拦截器统一处理
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user