IIS错误信息：HTTP 错误 401.3 - Unauthorized 由于 Web 服务器上此资源的访问控制列表(ACL)配置或加密设置，您无权查看此目录或页面

<think>这个错误信息表明在调用API `/wjdc/wj/listTx` 时，认证失败，无法访问系统资源。这通常意味着请求没有携带有效的身份验证凭证（如token），或者携带的凭证已过期或无效。 解决方案： 1. 检查API是否需要认证：确认该API是否需要登录后才能访问。 2. 添加认证信息：在请求头中添加认证信息（如token）。 3. 处理认证失败：当认证失败时，跳转到登录页面或刷新token。 以下步骤将指导你如何修改代码： 步骤1：在发送请求前，从本地存储（如localStorage）中获取token。 步骤2：将token添加到请求头中（通常使用Authorization头）。 步骤3：如果服务器返回401（未授权）或403（禁止访问）错误，则执行登出操作或跳转到登录页面。 修改后的`fetchData`函数如下： 注意：假设我们使用Bearer Token认证方式，且token存储在localStorage的`token`字段中。 修改点： 1. 在请求头中添加`Authorization: Bearer ${token}` 2. 在捕获错误时，检查响应状态码，如果是401或403，则重定向到登录页面。 代码修改如下：</think>### 解决 API 认证失败问题：请求访问 `/wjdc/wj/listTx` 认证失败 这个错误表明您的 API 请求缺少有效的身份验证凭证。以下是完整的解决方案，包括前端代码修复和后端配置建议： #### 完整解决方案代码 ```vue <script setup> import { ref, reactive, onMounted, onUnmounted } from &#39;vue&#39;; import axios from &#39;axios&#39;; import { ElMessage } from &#39;element-plus&#39;; import { useRouter } from &#39;vue-router&#39;; const router = useRouter(); // 环境变量管理API地址 const API_BASE = import.meta.env.VITE_API_BASE || &#39;http://172.26.26.43/dev-api&#39;; const API_URL = `${API_BASE}/wjdc/wj/listTx`; // 表单数据 const formData = reactive({ dcWjTitle: &#39;&#39;, dcId: &#39;&#39;, dcDept: &#39;&#39;, state: null }); // 表格数据 const tableData = ref([]); const loading = ref(false); // 分页配置 const pagination = reactive({ current: 1, size: 10, total: 0 }); // 请求取消令牌 let cancelTokenSource = axios.CancelToken.source(); // 获取认证令牌 const getAuthToken = () => { // 从localStorage获取token const token = localStorage.getItem(&#39;authToken&#39;); // 如果没有token，重定向到登录页 if (!token) { ElMessage.warning(&#39;请先登录&#39;); router.push(&#39;/login&#39;); return null; } return token; }; // 获取数据 const fetchData = async () => { // 获取认证令牌 const token = getAuthToken(); if (!token) return; // 取消之前的请求 if (cancelTokenSource) { cancelTokenSource.cancel(&#39;请求被取消&#39;); } cancelTokenSource = axios.CancelToken.source(); loading.value = true; try { // 构造请求参数 const params = { pageNum: pagination.current, pageSize: pagination.size, ...formData }; // 调用API - 添加认证头 const response = await axios.get(API_URL, { params, cancelToken: cancelTokenSource.token, headers: { &#39;Content-Type&#39;: &#39;application/json&#39;, &#39;Authorization&#39;: `Bearer ${token}` // 添加认证头 } }); // 处理响应数据 const { data } = response; if (data && data.code === 200) { tableData.value = data.data.rows || []; pagination.total = data.data.total || 0; // 空数据提示 if (tableData.value.length === 0) { ElMessage.info(&#39;没有找到匹配的数据&#39;); } } else { const errorMsg = data?.msg || &#39;未知错误&#39;; console.error(&#39;API返回错误:&#39;, errorMsg); ElMessage.error(`请求失败: ${errorMsg}`); tableData.value = []; pagination.total = 0; } } catch (error) { // 处理认证失败 if (error.response && error.response.status === 401) { ElMessage.error(&#39;认证过期，请重新登录&#39;); localStorage.removeItem(&#39;authToken&#39;); // 清除无效token router.push(&#39;/login&#39;); // 重定向到登录页 return; } // 忽略取消请求的错误 if (!axios.isCancel(error)) { console.error(&#39;获取数据失败:&#39;, error); const errorMsg = error.response?.data?.message || &#39;网络请求失败&#39;; ElMessage.error(`请求失败: ${errorMsg}`); tableData.value = []; pagination.total = 0; } } finally { loading.value = false; } }; // 页面加载时获取初始数据 onMounted(() => { fetchData(); }); // 组件卸载时取消所有请求 onUnmounted(() => { if (cancelTokenSource) { cancelTokenSource.cancel(&#39;组件卸载，取消请求&#39;); } }); </script> ``` ### 解决方案详解 #### 1. 添加认证令牌到请求头 ```javascript const getAuthToken = () => { const token = localStorage.getItem(&#39;authToken&#39;); if (!token) { ElMessage.warning(&#39;请先登录&#39;); router.push(&#39;/login&#39;); return null; } return token; }; // 在请求中添加认证头 headers: { &#39;Content-Type&#39;: &#39;application/json&#39;, &#39;Authorization&#39;: `Bearer ${token}` // JWT标准格式 } ``` - **问题原因**：API 需要认证令牌才能访问 - **解决方案**：从本地存储获取令牌并添加到请求头 - **最佳实践**：使用 `Bearer` 方案（JWT标准） #### 2. 处理认证失败错误 (401 Unauthorized) ```javascript catch (error) { if (error.response && error.response.status === 401) { ElMessage.error(&#39;认证过期，请重新登录&#39;); localStorage.removeItem(&#39;authToken&#39;); router.push(&#39;/login&#39;); return; } // ...其他错误处理 } ``` - **问题原因**：令牌可能过期或无效 - **解决方案**： - 检测401状态码 - 清除无效令牌 - 重定向到登录页面 #### 3. 使用 Vue Router 进行导航控制 ```javascript import { useRouter } from &#39;vue-router&#39;; const router = useRouter(); // 重定向到登录页 router.push(&#39;/login&#39;); ``` - **问题原因**：需要安全的页面导航 - **解决方案**：使用Vue Router进行程序化导航 #### 4. 改进错误消息显示 ```javascript const errorMsg = error.response?.data?.message || &#39;网络请求失败&#39;; ElMessage.error(`请求失败: ${errorMsg}`); ``` - **问题原因**：原始错误信息不友好 - **解决方案**：提取后端返回的错误消息或提供默认提示 ### 后端配置建议（示例） #### 1. 登录接口示例（返回JWT令牌） ```javascript // Node.js/Express 示例 app.post(&#39;/api/login&#39;, (req, res) => { const { username, password } = req.body; // 验证用户凭证（伪代码） const user = authenticateUser(username, password); if (user) { // 生成JWT令牌（使用jsonwebtoken库） const token = jwt.sign( { userId: user.id, role: user.role }, process.env.JWT_SECRET, { expiresIn: &#39;1h&#39; } ); res.json({ code: 200, message: &#39;登录成功&#39;, data: { token } }); } else { res.status(401).json({ code: 401, message: &#39;用户名或密码错误&#39; }); } }); ``` #### 2. 认证中间件 ```javascript // JWT认证中间件 const authenticateJWT = (req, res, next) => { const authHeader = req.headers.authorization; if (authHeader) { const token = authHeader.split(&#39; &#39;)[1]; jwt.verify(token, process.env.JWT_SECRET, (err, user) => { if (err) { return res.status(403).json({ message: &#39;无效的认证令牌&#39; }); } req.user = user; next(); }); } else { res.status(401).json({ message: &#39;缺少认证令牌&#39; }); } }; // 受保护的路由 app.get(&#39;/wjdc/wj/listTx&#39;, authenticateJWT, (req, res) => { // 处理业务逻辑 res.json({ data: [...] }); }); ``` ### 前端登录逻辑示例 ```vue <script setup> import { ref } from &#39;vue&#39;; import axios from &#39;axios&#39;; import { ElMessage } from &#39;element-plus&#39;; import { useRouter } from &#39;vue-router&#39;; const router = useRouter(); const loginForm = ref({ username: &#39;&#39;, password: &#39;&#39; }); const handleLogin = async () => { try { const response = await axios.post(&#39;/api/login&#39;, loginForm.value); if (response.data.code === 200) { // 保存令牌到本地存储 localStorage.setItem(&#39;authToken&#39;, response.data.data.token); ElMessage.success(&#39;登录成功&#39;); // 跳转到主页面 router.push(&#39;/dashboard&#39;); } else { ElMessage.error(response.data.message || &#39;登录失败&#39;); } } catch (error) { ElMessage.error(&#39;网络错误，请稍后重试&#39;); } }; </script> ``` ### 解决方案总结 1. **前端修复**： - 添加认证令牌到请求头 - 实现401错误处理逻辑 - 使用Vue Router进行导航控制 - 改进错误消息显示 2. **后端配置**： - 实现JWT认证机制 - 添加认证中间件保护路由 - 返回明确的错误信息 3. **完整流程**： ```mermaid sequenceDiagram participant 前端 participant 后端 前端->>后端: 登录请求(用户名/密码) 后端-->>前端: 返回JWT令牌 前端->>前端: 存储令牌(localStorage) 前端->>后端: API请求(带Authorization头) 后端->>后端: 验证令牌有效性 后端-->>前端: 返回请求数据或错误 ``` 4. **安全实践**： - 使用HTTPS传输 - 设置令牌过期时间（建议1-2小时） - 使用HttpOnly标记存储令牌（防止XSS攻击） - 实施令牌刷新机制