aws 制作的 HttpRequests 拦截器 API

Question

我正在开发一个项目，该项目使用 cognito 作为身份验证服务来保护使用 nodeJS 制作的无服务器休息 API。我已经为 non-authenticated 个客户成功关闭了 API。现在，每当我从 Angular 客户端发出请求时，我都需要在 header 中自动注入一个令牌。我尝试的是像这样实现一个 HttpInterceptor :

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {


    req = req.clone({
        setHeaders: {
          'Content-Type' : 'application/json; charset=utf-8',
          'Accept'       : 'application/json',
              'Authorization': `${this.authService.userToken}`,
              //#endregion
          },
          
        })
  

  return next.handle(req);
}

当我使用标准 angular HttpClient 发出请求时，这对我来说总是很好用。但是现在当我使用 aws-amplify 包中的 API 向我的 API.Gateway 发出请求时，这些请求无法像这样被拦截。这是我提出请求的方式：

import { API } from 'aws-amplify';
.
.
.
 return API.get('apiName', '/users',{})

而且这些都没有使用 Angular HttpClient。

编辑：同样在 app.module.ts 中：

providers : [{
    provide : HTTP_INTERCEPTORS,
    useClass: HttpRequestInterceptor,  --> My interceptor class
    multi   : true,
  }]

有人知道我如何拦截这些对我的 API 网关的请求以注入令牌吗？

玩得开心！

Answer 1

使用 Axios 拦截使用 aws-amplify 包发出的请求，因为 aws-amplify 包使用 Axios 发出请求。

Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser and it supports the Promise API that is native to JS ES6. It can be used to intercept HTTP requests and responses and enables client-side protection against XSRF. It also has the ability to cancel requests.

在这种情况下，为拦截器创建一个新服务。

在axios-interceptor.service.ts,

import { Injectable } from '@angular/core';
import axios from 'axios';

@Injectable({providedIn: 'root'})
export class AxiosInterceptorService {
    intercept() {
        axios.interceptors.request.use(request => {
            request.headers['Content-Type'] = 'application/json; charset=utf-8';
            request.headers.Accept = 'application/json';
            request.headers.Authorization = `${userToken}`;
            return request;
        });
    }
}

export function AxiosConfigFactory(axiosIntercept: AxiosInterceptorService): any {
  return () => axiosIntercept.intercept();
}

在app.module.ts,

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AxiosConfigFactory, AxiosInterceptorService } from './axios-interceptor-service.service';

providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: AxiosConfigFactory,
        deps: [AxiosInterceptorService],
        multi: true
    }
],

此外，我们还可以在 intercept() 方法中使用以下代码来处理错误响应。

axios.interceptors.response.use(response => {
      return Promise.resolve(response);
    }, errorObject => {

    return Promise.reject(errorObj.response);
});

PS：我真的很难弄明白这一点。即使答案迟到了，我希望它能对以后的人有所帮助:)

aws 制作的 HttpRequests 拦截器 API

Interceptor for HttpRequests made by aws API

authentication

api

amazon-web-services

aws-api-gateway

angular