简单易懂的 Axios 拦截器：请求结果统一处理和响应强制授权

引子：拦截器的魅力

在现代 Web 开发中，拦截器是一种强大的工具，可以帮助我们轻松地扩展 HTTP 请求和响应的行为。它允许我们在请求发送到服务器之前或服务器响应返回到客户端之前对其进行拦截和处理。这使得我们能够实现各种各样的功能，例如：

• 请求结果的统一处理：我们可以使用拦截器在每个请求成功或失败后执行一些通用的操作，例如显示加载指示器、处理错误消息等。
• 响应强制授权：当用户当前账户长时间不登录过期时，我们可以使用拦截器强制要求用户重新登录授权。

拦截器详解

要使用 Axios 拦截器，首先需要创建一个 axios 实例。然后，您可以使用以下方法来注册请求和响应拦截器：

// 创建 axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://example.com/api',
});

// 注册请求拦截器
axiosInstance.interceptors.request.use((config) => {
  // 在请求发送前做一些事情
  return config;
});

// 注册响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 在收到响应后做一些事情
    return response;
  },
  (error) => {
    // 在收到错误响应后做一些事情
    return Promise.reject(error);
  }
);

请求结果统一处理

使用 Axios 拦截器实现请求结果统一处理非常简单。您只需要在响应拦截器中添加一些代码即可。例如：

axiosInstance.interceptors.response.use(
  (response) => {
    // 在收到响应后做一些事情

    // 如果请求成功，则显示成功提示
    if (response.status === 200) {
      // 显示成功提示
    }

    return response;
  },
  (error) => {
    // 在收到错误响应后做一些事情

    // 如果请求失败，则显示错误提示
    if (error.response.status === 401) {
      // 显示错误提示
    }

    return Promise.reject(error);
  }
);

响应强制授权

使用 Axios 拦截器实现响应强制授权也非常简单。您只需要在响应拦截器中添加一些代码即可。例如：

axiosInstance.interceptors.response.use(
  (response) => {
    // 在收到响应后做一些事情

    // 如果请求成功，则检查用户是否已经登录
    if (response.status === 200) {
      // 检查用户是否已经登录
      if (localStorage.getItem('token') === null) {
        // 强制要求用户重新登录授权
        window.location.href = '/login';
      }
    }

    return response;
  },
  (error) => {
    // 在收到错误响应后做一些事情

    // 如果请求失败，则检查用户是否已经登录
    if (error.response.status === 401) {
      // 强制要求用户重新登录授权
      window.location.href = '/login';
    }

    return Promise.reject(error);
  }
);

结语：拦截器的强大

通过本文的介绍，您应该已经了解了如何使用 Axios 拦截器实现请求结果统一处理和响应强制授权的功能。拦截器是一种非常强大的工具，它可以帮助您简化代码，提高开发效率，并增强应用程序的安全性。希望您能够在您的项目中充分利用拦截器，发挥它的强大威力。