api拦截控

API 拦截控制

一、API 拦截的概念

API 拦截是指在应用程序与服务器之间交互过程中，对 API 请求和响应进行监测、修改或阻止的操作，它允许开发者在数据传输的不同阶段插入自定义逻辑，以实现诸如身份验证、数据校验、性能优化、安全增强等多种功能。

二、拦截的类型

拦截类型	描述
请求拦截	在请求发送到服务器之前，对请求的参数、头信息等进行处理，可以添加公共的请求头（如 token、用户代理等），或者对请求参数进行加密、签名等操作，以确保数据的安全性和完整性。
响应拦截	在服务器返回响应后，对响应的数据进行处理，常见的操作包括检查响应状态码、解析响应数据格式（如 JSON、XML 等）、对敏感数据进行脱敏处理等，如果响应数据不符合预期，还可以进行错误处理或重试机制的触发。

三、实现 API 拦截的技术

（一）前端实现（以 Axios 为例）

1、安装 Axios 库

在项目中使用 npm 或 yarn 安装 Axios：

   npm install axios

2、创建拦截器实例

   import axios from 'axios';
   const instance = axios.create({
     baseURL: 'https://api.example.com',
     timeout: 1000,
     headers: {'X-Custom-Header': 'foobar'}
   });

3、添加请求拦截器

   instance.interceptors.request.use(function (config) {
     // 在发送请求之前做某件事
     const token = localStorage.getItem('token');
     if (token) {
       config.headers.Authorization =Bearer ${token};
     }
     return config;
   }, function (error) {
     // 请求错误时做些事
     return Promise.reject(error);
   });

4、添加响应拦截器

   instance.interceptors.response.use(function (response) {
     // 对响应数据做点什么
     return response;
   }, function (error) {
     // 对响应错误做点什么
     return Promise.reject(error);
   });

5、使用拦截器实例发送请求

   instance.get('/user/profile')
     .then(function (response) {
       console.log(response.data);
     })
     .catch(function (error) {
       console.error(error);
     });

（二）后端实现（以 Node.js + Express 为例）

1、安装相关中间件

   npm install express morgan body-parser helmet

2、创建 Express 应用并设置中间件

   const express = require('express');
   const morgan = require('morgan');
   const bodyParser = require('body-parser');
   const helmet = require('helmet');
   const app = express();
   app.use(morgan('dev')); // 日志记录中间件
   app.use(bodyParser.json()); // 解析 JSON 请求体中间件
   app.use(helmet()); // 安全中间件，防止常见 Web 漏洞
   // 请求拦截示例：全局前置守卫，用于身份验证等
   app.use((req, res, next) => {
     const token = req.headers['authorization'];
     if (!token) {
       return res.status(401).json({ error: 'Unauthorized' });
     }
     next();
   });
   // 定义路由
   app.get('/api/data', (req, res) => {
     res.json({ data: 'This is some data' });
   });
   app.listen(3000, () => {
     console.log('Server is running on port 3000');
   });

四、API 拦截的应用场景

（一）身份认证与授权

在用户登录成功后，服务器会颁发一个令牌（如 JWT），在后续的 API 请求中，通过在请求头中携带该令牌，服务器可以验证用户的身份和权限，从而决定是否允许访问特定的资源，拦截器可以在请求发送前自动添加令牌，确保每个请求都经过身份验证。

（二）数据缓存与性能优化

对于一些频繁访问且不经常变化的数据，可以通过拦截器在请求时先检查本地缓存，如果缓存存在且有效，则直接返回缓存数据，避免不必要的网络请求，提高应用程序的性能和响应速度。

（三）数据格式转换与校验

在前后端交互过程中，可能需要对数据进行格式转换（如将后端返回的数据库对象转换为前端易于处理的格式）或校验（如检查数据的完整性、是否符合业务规则等），拦截器可以在请求和响应阶段分别进行相应的处理，确保数据的一致性和准确性。

五、相关问题与解答

（一）问题：如何在前端同时使用多个 Axios 实例，并且每个实例都有不同的拦截器配置？

解答：可以创建多个 Axios 实例，并为每个实例分别设置不同的拦截器。

const instance1 = axios.create({ baseURL: 'https://api1.example.com' });
instance1.interceptors.request.use(function (config) {
  // 特定于 instance1 的请求拦截逻辑
  return config;
});
instance1.interceptors.response.use(function (response) {
  // 特定于 instance1 的响应拦截逻辑
  return response;
});
const instance2 = axios.create({ baseURL: 'https://api2.example.com' });
instance2.interceptors.request.use(function (config) {
  // 特定于 instance2 的请求拦截逻辑
  return config;
});
instance2.interceptors.response.use(function (response) {
  // 特定于 instance2 的响应拦截逻辑
  return response;
});

这样，在不同的场景下可以使用不同的实例来发送请求，每个实例都有其独立的拦截器配置，互不影响。

（二）问题：后端如何防止 API 被恶意请求攻击（如 DDoS）？

解答：除了使用上述提到的安全中间件（如 helmet）外，还可以采取以下措施：

1、限制请求频率：通过设置 IP 地址或用户的请求速率限制，防止单个 IP 或用户在短时间内发送大量请求，可以使用第三方库（如 express-rate-limit）来实现请求频率限制。

   const rateLimit = require('express-rate-limit');
   const limiter = rateLimit({
     windowMs: 15 * 60 * 1000, // 15 分钟
     max: 100 // 每个 IP 最多允许 100 次请求
   });
   app.use(limiter);

2、验证码验证：对于一些敏感操作或容易被自动化脚本攻击的接口，可以要求用户输入验证码，以区分人类用户和自动化程序，可以使用第三方验证码服务（如 Google reCAPTCHA）来实现。

3、防火墙配置：在服务器层面配置防火墙规则，限制来自特定 IP 段或地区的访问，只允许合法的请求来源访问 API，这可以通过云服务提供商提供的防火墙功能或服务器操作系统自带的防火墙软件来实现。

小伙伴们，上文介绍了“api拦截控”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。