如何为AWS Amplify GraphQL请求实现可用的Angular拦截器

失效根因 #

AWS Amplify的GraphQL客户端内部维护了独立的私有axios实例，不会复用项目全局导入的axios实例，因此直接给全局axios调用axios.interceptors.request.use()添加的拦截器不会生效。

解决方案 #

优先使用Amplify官方提供的拦截器能力，无需修改底层依赖，兼容性更好，具体写法根据你使用的Amplify版本有所区别：

Amplify v5及更早版本 #

直接调用API模块暴露的拦截器接口配置即可：

import { API } from 'aws-amplify';

// 建议在AppModule构造函数或APP_INITIALIZER初始化逻辑中执行
export function initAmplifyInterceptors() {
  // 请求拦截
  API.interceptors.request.use(
    (request) => {
      // 自定义请求逻辑：比如添加请求头、修改请求参数
      request.headers['X-Custom-Header'] = '自定义参数值';
      return request;
    },
    (error) => Promise.reject(error)
  );

  // 响应拦截
  API.interceptors.response.use(
    (response) => {
      // 自定义响应逻辑：统一处理返回码、修改响应结果
      return response;
    },
    (error) => Promise.reject(error)
  );
}

Amplify v6版本 #

v6版本调整了拦截器的配置入口，需要放在Amplify.configure的libraryOptions中：

import { Amplify } from 'aws-amplify';
import amplifyconfig from './amplifyconfiguration.json';

Amplify.configure(amplifyconfig, {
  libraryOptions: {
    api: {
      graphql: {
        interceptors: [
          {
            // 匹配所有GraphQL请求，可自定义匹配规则
            applyToPolicy: () => true,
            // 请求拦截逻辑
            request: async (request) => {
              request.headers.set('X-Custom-Header', '自定义参数值');
              return request;
            },
            // 响应拦截逻辑
            response: async (response) => {
              return response;
            },
            // 错误拦截逻辑
            error: async (error) => {
              return Promise.reject(error);
            }
          }
        ]
      }
    }
  }
});

可选方案：替换Amplify底层axios实例 #

如果你确实需要复用项目已有的全局axios拦截器逻辑，可以直接替换Amplify内部的axios实例，注意该方法依赖Amplify内部私有属性，版本升级可能不兼容：

import axios from 'axios';
import { API } from 'aws-amplify';

// 你自己的axios实例，已经配置好全局拦截器
const customAxios = axios.create();
customAxios.interceptors.request.use(/* 你的现有拦截逻辑 */);

// 替换Amplify内部的axios实例（仅v5及更早版本有效）
API._api.axiosInstance = customAxios;

注意事项 #

• 所有拦截器配置必须放在Amplify.configure初始化完成之后，第一次发起GraphQL请求之前执行
• Angular项目建议将拦截器配置逻辑放在APP_INITIALIZER的初始化任务中，确保应用启动时配置就已生效

内容的提问来源于stack exchange，提问作者irfan babar