更新index.html,优化API调用函数,增强错误处理逻辑并兼容非JSON响应,修改认证提示文本以更清晰地说明身份认证要求

This commit is contained in:
Zhuym 2025-01-30 21:52:26 +08:00
parent efc0c7cb50
commit 7a28bdb453

View File

@ -223,7 +223,7 @@
} }
.MuiTypography-h6 { .MuiTypography-h6 {
font-size: 1.1rem !important; font-size: 1.1rem !重要;
} }
/* 表单样式 */ /* 表单样式 */
@ -493,64 +493,71 @@
localStorage.setItem('apiLogs', JSON.stringify(updatedLogs)); localStorage.setItem('apiLogs', JSON.stringify(updatedLogs));
}; };
const handleApiCall = async (endpoint, method = 'GET', formData = null, config) => { const handleApiCall = async (endpoint, method = "GET", formData = null, config) => {
try { try {
const options = { const options = {
method, method,
headers: { 'Content-Type': 'application/json' } headers: { "Content-Type": "application/json" },
credentials: "include" // 跨域凭证
}; };
let url = `${apiBase}${endpoint}`; let url = `${apiBase}${endpoint}`;
// 处理GET请求参数 // GET请求参数处理
if (method === 'GET' && config.queryParams) { if (method === "GET" && config?.queryParams) {
const params = new URLSearchParams(); const params = new URLSearchParams();
config.queryParams.forEach(param => { config.queryParams.forEach(param => {
if (formData[param]) params.append(param, formData[param]); if (formData?.[param]) params.append(param, formData[param]);
}); });
url += `?${params.toString()}`; url += `?${params.toString()}`;
} }
// 处理POST请求体 // POST请求体处理
if (method === 'POST') { if (method === "POST" && config?.requestFormat === "json") {
if (config.requestFormat === 'json') { options.body = JSON.stringify(formData);
options.body = JSON.stringify(formData);
}
} }
const res = await fetch(url, options); const res = await fetch(url, options);
const data = await res.json(); const rawText = await res.text(); // 先获取原始文本
setResponse(JSON.stringify(data, null, 2));
// 保存日志 // 尝试解析JSON兼容非JSON响应
saveLog(endpoint, formData, data); let data;
try {
// 处理登录响应 data = JSON.parse(rawText);
if (config.endpoint === '/qr' && data.userId) { } catch {
setUserId(data.userId.toString()); data = { _raw: rawText }; // 解析失败时保留原始响应
setCookie('userId', data.userId.toString(), 7);
// 遍历所有表单配置更新包含userid/userId字段的表单
Object.entries(formConfigs).forEach(([key, formConfig]) => {
const userIdField = formConfig.fields.find(
field => field.id.toLowerCase().includes('userid')
);
if (userIdField && formRefs.current[key]) {
formRefs.current[key].updateField(userIdField.id, data.userId.toString());
}
});
} }
setResponse(JSON.stringify(data, null, 2)); // 显示原始内容
// 保存日志(包含状态码)
saveLog(endpoint, { ...formData, _status: res.status }, data);
// 登录处理逻辑
if (config?.endpoint === "/qr" && data.userId) {
setUserId(data.userId.toString());
setCookie("userId", data.userId.toString(), 7);
// 根据状态设置提示消息 Object.entries(formConfigs).forEach(([key, formConfig]) => {
setSnackbarMessage(data.info || '操作成功'); const userIdField = formConfig.fields.find(
field => field.id.toLowerCase().includes("userid")
);
if (userIdField && formRefs.current[key]) {
formRefs.current[key].updateField(userIdField.id, data.userId.toString());
}
});
}
// 显示服务器返回的原始提示兼容非JSON响应
setSnackbarMessage(data.info || data._raw || "请求完成");
setSnackbarOpen(true); setSnackbarOpen(true);
} catch (error) { } catch (error) {
setResponse(`Error: ${error.message}`); setResponse(`Error: ${error.message}`);
setSnackbarMessage(`错误: ${error.message}`); setSnackbarMessage(`网络错误: ${error.message}`);
setSnackbarOpen(true); setSnackbarOpen(true);
} }
}; };
const handleMusicChange = (e) => { const handleMusicChange = (e) => {
const { name, value } = e.target; const { name, value } = e.target;
@ -799,8 +806,7 @@
{/* 新增认证提示区域 */} {/* 新增认证提示区域 */}
<Box display="flex" justifyContent="space-between" alignItems="center" mt={2}> <Box display="flex" justifyContent="space-between" alignItems="center" mt={2}>
<Typography variant="body2" color="textSecondary"> <Typography variant="body2" color="textSecondary">
⚠️部分后端地址已设置访问认证保护,使用前需完成身份认证。 ⚠️部分后端地址受认证保护 使用前可能需要身份认证
</Typography> </Typography>
<Button <Button
variant="text" variant="text"