JavaScript Fetch API 中怎么在请求拦截器中统一注入鉴权信息-js教程-PHP中文网

fetch api 无原生拦截器，但可通过重写 window.fetch 实现请求前注入鉴权信息：保存原始函数，读取 token 后添加 authorization 头，并兼容各类调用方式；进阶可封装 gettoken() 和响应处理 401。

javascript fetch api 中怎么在请求拦截器中统一注入鉴权信息

Fetch API 本身不提供原生拦截器机制，但可以通过重写全局 window.fetch 实现请求前统一注入鉴权信息——这是最直接、轻量且兼容性好的方案。

手动重写 fetch 实现请求拦截

核心思路是保存原始 fetch 函数，再用自定义逻辑包裹它，在发起请求前自动添加 Authorization 头：

先从 localStorage、内存变量或 token 管理器中读取有效 token
检查 token 是否存在且非空，避免拼出 Bearer undefined
若 headers 未定义，初始化为空对象；再合并 Authorization 和其他默认头（如 Content-Type）
保持原有参数结构不变，确保所有合法调用方式（字符串 URL、Request 实例、带 init 的对象）都兼容

基础拦截示例（含安全校验）

以下代码可直接运行，支持 GET/POST 及 Request 对象入参：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

const originalFetch = window.fetch;

window.fetch = function(input, init = {}) {
  const token = localStorage.getItem('auth_token');
  
  // 只在有 token 时注入，避免污染无鉴权请求
  if (token) {
    const headers = new Headers(init.headers || {});
    headers.set('Authorization', `Bearer ${token}`);
    
    init = {
      ...init,
      headers
    };
  }

  return originalFetch(input, init);
};