如何在Angular搭配AWS Amplify的项目中拦截HTTP请求

你自行引入并配置拦截器的axios实例，与AWS Amplify内部依赖的axios属于完全独立的两个实例，因此你添加的拦截规则无法作用于Amplify发起的API请求，导致拦截逻辑不触发。

方案一：使用Amplify原生API拦截器（推荐） #

Amplify自带的API模块内置了拦截器能力，无需额外依赖，配置后可直接作用于所有Amplify发起的请求，修改你的拦截器代码如下即可：

import { Injectable } from '@angular/core';
import { API } from 'aws-amplify';

@Injectable({providedIn: 'root'})
export class MyInterceptor {
  intercept() {
    console.log("Hello this is my interceptor")
    // 注册请求拦截器
    API.interceptors.request.use(request => {
      console.log("*******************Inside My Interceptor*************");
      console.log("Call: ", request);
      // 支持自定义修改请求，例如追加请求头、修改请求参数等
      // request.headers['X-Custom-Header'] = 'your value'
      return request;
    }, error => {
      // 请求发送失败的错误处理逻辑
      return Promise.reject(error);
    });

    // 可选：注册响应拦截器
    API.interceptors.response.use(response => {
      // 响应成功处理逻辑
      return response;
    }, error => {
      // 响应异常处理逻辑，例如401状态码跳转登录页
      return Promise.reject(error);
    });
  }
}

export function InterceptorFactory(myIntercept: MyInterceptor): any {
  return () => myIntercept.intercept();
}

你原有AppModule里的APP_INITIALIZER配置无需修改，直接生效。

方案二：复用Angular原生HTTP拦截器 #

如果你需要统一通过Angular自带的HTTP拦截器管理所有请求（包括Amplify发起的请求），可以配置Amplify使用Angular的HttpClient替代内部的axios发送请求，原有Angular拦截器即可正常生效：

1. 实现自定义Amplify HTTP处理器

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Amplify, ApiHandler, ApiRequest, ApiResponse } from '@aws-amplify/core';

@Injectable({ providedIn: 'root' })
export class CustomAmplifyHttpHandler implements ApiHandler {
  constructor(private http: HttpClient) {}

  async send(request: ApiRequest): Promise<ApiResponse> {
    const headers = new HttpHeaders(request.headers);
    return this.http.request(request.method, request.url, {
      body: request.body,
      headers,
      params: request.queryParams,
      observe: 'response',
      responseType: 'json'
    }).toPromise().then(res => ({
      statusCode: res.status,
      headers: res.headers,
      body: res.body
    }));
  }
}

2. 在AppModule中注册处理器

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CustomAmplifyHttpHandler } from './custom-http-handler.service';
// 你自己的Angular原生拦截器
import { YourAngularInterceptor } from './your-http-interceptor.service';

providers: [
  CustomAmplifyHttpHandler,
  {
    provide: APP_INITIALIZER,
    useFactory: (httpHandler: CustomAmplifyHttpHandler) => () => {
      Amplify.registerApiHandler(httpHandler);
    },
    deps: [CustomAmplifyHttpHandler],
    multi: true
  },
  // 原有Angular拦截器正常注册即可
  { provide: HTTP_INTERCEPTORS, useClass: YourAngularInterceptor, multi: true }
]

内容的提问来源于stack exchange，提问作者zain.manzoor