如何在react中读取401未授权响应

在React中处理HTTP 401未授权响应通常涉及到前端应用与后端API的交互。当后端返回401状态码时，意味着请求未被授权，可能是因为缺少有效的认证令牌（如JWT）或其他认证信息。

基础概念

HTTP状态码：401表示未授权，客户端没有提供有效的身份验证凭据。
认证令牌：通常用于验证用户身份，如JWT（JSON Web Token）。
拦截器：在发送请求之前或收到响应之后执行某些操作的机制。

类型

请求拦截器：在发送请求前添加认证头。
响应拦截器：在收到响应后检查状态码，并处理401错误。

应用场景

用户尝试访问需要认证的资源时。
会话过期或无效时。

遇到的问题及解决方法

为什么会这样？

当用户尝试访问需要认证的资源，但客户端未能提供有效的认证令牌时，服务器会返回401状态码。

原因是什么？

用户未登录或会话已过期。
认证令牌无效或已损坏。
请求头中缺少认证信息。

如何解决这些问题？

检查认证令牌：确保在请求头中包含有效的认证令牌。
使用拦截器：通过Axios或其他HTTP客户端库设置拦截器，统一处理认证问题。
重定向到登录页面：当检测到401响应时，重定向用户到登录页面。

示例代码

以下是一个使用Axios和React Hooks处理401响应的示例：

import React, { useEffect } from 'react';
import axios from 'axios';
import { useHistory } from 'react-router-dom';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

// 添加响应拦截器
api.interceptors.response.use(
  response => response,
  error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      // 如果是401错误且未重试过，则重定向到登录页面
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

const MyComponent = () => {
  const history = useHistory();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await api.get('/protected-resource');
        console.log(response.data);
      } catch (error) {
        if (error.response.status === 401) {
          history.push('/login');
        }
      }
    };

    fetchData();
  }, [history]);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

export default MyComponent;