前端报错401 【已解决】

二川bro

已于 2025-02-13 14:17:20 修改

阅读量1.1w

点赞数 49

分类专栏： bug集合前端文章标签： bug

于 2024-09-24 20:18:57 首次发布

本文链接：https://blog.csdn.net/qq_34419312/article/details/142499013

版权

前端同时被 2 个专栏收录

114 篇文章

订阅专栏

bug集合

63 篇文章

订阅专栏

前端报错401 【已解决】

在前端开发中，HTTP状态码401（Unauthorized）是一个常见的错误，它表明用户试图访问受保护的资源，但未能提供有效的身份验证信息。本文将深入探讨401错误的原因、解决思路、具体解决方法

文章最后，小编给同学们整理好了，针对各种 4xx 状态码表格，方便大家更直观进行比较

在这里插入图片描述

文章目录

前端报错401 【已解决】

一、报错问题

401错误通常出现在用户尝试访问需要权限的资源时，如API接口、受保护的页面等。浏览器在收到401响应后，通常会显示一个登录提示或者错误页面，告知用户无权限访问。这个问题可能由多种原因引起，包括但不限于：

用户未登录或会话已过期。
提供的认证信息（如Token）无效或已过期。
请求的资源权限配置错误。

二、解决思路

针对401错误，我们可以从以下几个方面着手解决：

确认用户身份：确保用户已经登录，并且会话有效。如果会话过期，应引导用户重新登录。
检查认证信息：验证用户提供的认证信息（如Token）是否有效，以及是否与服务端配置一致。
调整权限配置：检查服务端对资源的权限配置，确保请求的资源与用户权限匹配。

三、解决方法

在这里插入图片描述

用户登录状态检查：
- 在前端代码中，通过检测用户登录状态（如存储在localStorage或sessionStorage中的用户信息）来判断用户是否已登录。
- 如果用户未登录，重定向到登录页面。

认证信息验证：

在发送请求前，检查认证信息（如Token）是否存在且未过期。
如果Token过期，可以引导用户重新登录以获取新Token。

示例代码：

function checkAuthToken() {
    const token = localStorage.getItem('authToken');
    if (!token || isTokenExpired(token)) {
        window.location.href = '/login';
    }
    return token;
}

function isTokenExpired(token) {
    // 假设token中包含过期时间信息，可以进行解析判断
    const decoded = jwtDecode(token);
    const expirationTime = new Date(decoded.exp * 1000);
    return new Date() > expirationTime;
}

权限配置调整：
- 与后端开发人员沟通，确保服务端的权限配置正确无误。
- 根据用户角色动态渲染前端页面，避免用户访问无权限的资源。

四、常见场景分析

登录后访问受限资源：
- 用户登录后，尝试访问某个需要特定权限的页面或API，但由于权限配置错误或Token问题导致401错误。
- 解决方法：检查用户权限和Token，确保与服务端配置一致。
会话过期后继续操作：
- 用户会话过期后，仍尝试进行需要认证的操作，导致401错误。
- 解决方法：在前端代码中检测会话状态，过期时引导用户重新登录。
跨域请求认证失败：
- 在进行跨域请求时，由于认证信息未能正确传递，导致401错误。
- 解决方法：确保跨域请求时认证信息（如Token）被正确包含在请求头中。

五、丰富篇

使用拦截器统一处理认证请求：

在前端框架中（如Vue、React等），可以使用拦截器来统一处理所有请求，确保每次请求都携带有效的认证信息。

示例代码（以Axios为例）：

axios.interceptors.request.use(config => {
    const token = checkAuthToken();
    if (token) {
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});

实现自动刷新Token机制：
- 为了避免Token过期导致的401错误，可以实现Token自动刷新机制。当Token即将过期时，自动请求新的Token并更新存储。
优化用户体验：
- 在用户遇到401错误时，提供友好的错误提示和解决方案（如引导重新登录、联系管理员等）。
- 避免频繁弹出登录提示，影响用户体验。

六、整理 4xx 各种状态码问题

以下是常见的HTTP接口状态码4XX的对比表格：

状态码	描述	原因	示例场景
400 Bad Request	客户端发送的请求存在语法或参数问题	请求格式错误、参数缺失或合法性校验失败等	请求的URL中包含未正确编码的特殊字符，或者请求体中缺少必填字段。
401 Unauthorized	客户端未通过身份验证	token缺失、失效或密码错误等	用户未登录或登录会话已过期，服务器要求重新进行身份验证。
403 Forbidden	客户端没有权限访问请求的资源	授权失败或禁止访问，即使登录成功	用户已登录，但没有权限访问特定页面或资源。
404 Not Found	请求的资源不存在或已被删除	请求的URL不正确或资源已被移除	用户访问了一个不存在的页面或资源链接已失效。
405 Method Not Allowed	客户端尝试使用的HTTP方法不被允许	请求方法不在服务端的支持范围内	对一个只支持GET方法的资源使用POST方法。
406 Not Acceptable	客户端无法解析服务端返回的内容类型	客户端期望的Content-Type类型与服务端响应类型不匹配	客户端请求JSON格式的数据，但服务端返回了XML格式。
407 Proxy Authentication Required	客户端必须通过代理服务器进行身份验证	访问资源需要通过代理服务器进行身份验证	访问公司内部资源时，需要通过公司的代理服务器进行身份验证。
408 Request Timeout	客户端在用户指定的时间内未能完成请求	请求处理超时，通常与客户端或网络拥塞有关	客户端发送的请求处理时间过长，超出了服务器设定的超时时间。
409 Conflict	请求因为与资源的当前状态冲突而未能完成	通常发生在PUT请求中，多个客户端试图同时编辑同一资源	两个用户几乎同时编辑同一篇文档，导致冲突。
410 Gone	请求的资源已经永久删除	与404不同，410表示资源永久删除，不会再次可用	某个页面或资源已被永久删除，不再提供服务。
411 Length Required	客户端请求头中没有包含Content-Length	服务器需要知道请求体的大小	客户端发送POST请求时，请求头中未包含Content-Length字段。
412 Precondition Failed	请求的先决条件未得到满足	如请求头中的If-Unmodified-Since或If-None-Match字段规定的先决条件不成立	客户端发送条件请求时，指定的先决条件未得到满足。
413 Payload Too Large	客户端发送的请求体过大	超过了服务器愿意或能够处理的大小	用户尝试上传超过服务器限制的大文件。
414 URI Too Long	请求的URI过长或请求头过大	超过了服务器允许的最大长度	请求的URL参数过多或过长，导致URI超出了限制。
415 Unsupported Media Type	客户端请求中发送的Content-Type或Content-Encoding头与服务端资源不匹配或不支持	客户端发送的数据类型不被服务端支持	客户端发送了服务器不支持的文件类型。
416 Range Not Satisfiable	客户端请求的资源范围无法被服务器满足	如请求的范围超出了文件实际的大小	客户端请求的文件部分超出了文件实际的大小。
417 Expectation Failed	服务器不能满足Expect请求头的要求，或者不支持Expect头	客户端在请求中使用了服务器不支持的Expect请求头	客户端发送了服务器不支持的Expect请求头。
421 Misdirected Request	请求被误导，服务器无法产生响应	通常发生在HTTP/2中，由于配置错误或其他原因，服务器接收到一个无法处理的请求	请求被发送到了错误的服务器或端口。
422 Unprocessable Entity	请求被服务器正确解析，但由于存在语法错误或数据格式问题而无法处理	如用户提交的表单数据中有不完整或错误的内容	客户端发送的表单数据存在语法错误或数据格式问题。
423 Locked	资源已被锁定	通常发生在生产环境中，资源被其他进程或用户锁定	尝试访问一个被其他用户锁定的资源。
426 Upgrade Required	客户端需要升级其HTTP协议以继续处理请求	服务器期望客户端能使用更高版本的HTTP协议	服务器要求客户端升级到HTTP/2或HTTP/3以继续处理请求。
429 Too Many Requests	客户端的请求频率过高，已被服务端限速	可能是由于客户端请求过快或服务端压力过大所致	用户在短时间内发送了过多请求，触发了服务器的限流机制。
451 Unavailable For Legal Reason	因法律原因，服务端无法处理当前请求	如内容因法律要求被屏蔽或删除	请求的内容因法律原因被禁止访问。