React报错Request failed with status code 401

### React 中处理 Axios 请求失败状态码 401 的解决方案 在 React 应用程序中，当使用 Axios 发送 HTTP 请求并遇到 `401 Unauthorized` 错误时，通常表示用户的认证已过期或无效。以下是几种常见的解决方法： #### 使用拦截器捕获错误 Axios 提供了一个内置的功能——拦截器，可以用来统一处理请求和响应中的异常情况。通过配置全局的响应拦截器来捕捉 `401` 错误，并执行相应的逻辑。 ```javascript import axios from 'axios'; // 创建 Axios 实例 const instance = axios.create({ baseURL: 'https://api.example.com', }); // 添加响应拦截器 instance.interceptors.response.use( response => { // 对于成功的响应不做特殊处理 return response; }, error => { if (error.response && error.response.status === 401) { // 处理未授权的情况 console.error('Unauthorized access detected'); // 清除本地存储的 token 或重定向到登录页面 localStorage.removeItem('token'); window.location.href = '/login'; } // 返回错误对象以便调用方能够进一步处理 return Promise.reject(error); } ); export default instance; ``` 此代码片段定义了自定义的 Axios 实例，并设置了响应拦截器用于检测 `401` 响应[^1]。 #### 刷新 Token 自动重新验证身份 如果应用程序支持刷新令牌机制，在接收到 `401` 后可尝试自动刷新访问令牌而无需让用户手动再次登录。 假设有一个 API 路径 `/refresh-token` 可以返回新的有效令牌，则可以通过如下方式实现： ```javascript function refreshAccessToken() { return axios.post('/auth/refresh-token', {}, { withCredentials: true }) .then(response => { const newToken = response.data.accessToken; localStorage.setItem('token', newToken); return newToken; }); } instance.interceptors.response.use(null, async error => { if (error.config && error.response && error.response.status === 401) { try { await refreshAccessToken(); return instance.request(error.config); // Retry original request after refreshing token. } catch (refreshError) { console.error('Failed to refresh token:', refreshError.message); localStorage.removeItem('token'); // Clear invalid tokens on failure. window.location.href = '/login'; // Redirect user back to login page. } } return Promise.reject(error); }); ``` 上述脚本展示了如何利用 Axios 拦截器结合服务器端提供的刷新接口完成无缝切换至最新可用的身份凭证过程[^2]。 #### 防止死锁现象影响用户体验 尽管这里讨论的是前端网络通信层面的问题而非多线程环境下的资源竞争状况，但仍然可以从避免死锁的角度出发优化设计思路。例如确保每次仅允许单一线程操作共享数据结构或者文件句柄；合理安排事务提交时机减少锁定时间等等均有助于提升整体性能表现[^4]。 最终目标始终围绕着改善系统的稳定性和健壮性展开工作。 --- ###