在 React 中找到 401 错误并注销 Axios

在 React 应用中使用 Axios 进行请求时，我们可能会遇到 401 错误（未授权）的情况。这种情况下，我们需要注销当前用户，以便从服务器获取新的访问令牌。本文提供了一个解决方案，以便在 React 中找到 401 错误并注销 Axios。

技术栈

在本文中，我们将使用以下技术栈：

• React
• Axios

步骤

步骤 1：配置 Axios 拦截器

我们需要在 Axios 中配置一个拦截器，以便在错误响应时触发相应的操作。以下是一个示例拦截器：

import axios from 'axios';

const token = localStorage.getItem('token');

const instance = axios.create({
  baseURL: 'http://example.com/api/',
  timeout: 1000,
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      // TODO: Logout user
      console.log('User logged out');
    }
    return Promise.reject(error);
  }
);

export default instance;

在这个拦截器中，我们向 Axios 实例添加了一个名为 instance 的拦截器。在拦截器的 response 方法中，我们返回了接收到的响应。在拦截器的 error 方法中，我们检查了响应的状态码是否为 401。如果是，我们在控制台中打印了一条消息，表示用户已注销。

步骤 2：注销用户

在拦截器中，我们打印了一条消息，表示用户已注销。然而，我们需要执行实际的注销操作以确保用户能够重新登录。这里我们只给出一个示例：

const handleLogout = () => {
  localStorage.removeItem('token');
  window.location.reload();
};

在上面的示例中，我们删除了本地存储中的令牌，并重新加载了页面。这将重置整个应用程序，以便用户可以使用新的访问令牌重新登录。

总结

在本文中，我们了解了如何在 React 中使用 Axios 拦截器找到 401 错误并注销用户。虽然本文提供了一种解决方案，但根据项目的实际需求，你可能需要进行一些更改。我们希望这篇文章能帮助您更好地理解如何在 React 应用中处理请求和响应。