Angular HttpInterceptor 分别加密和解密请求和响应答案

【问题标题】：Angular HttpInterceptor to encrypt and decrypt request and response respectivelyAngular HttpInterceptor 分别加密和解密请求和响应
【发布时间】：2022-02-04 22:58:40
【问题描述】：

在 Angular 应用程序中，我想加密请求并将其发送到服务器，同时在接收时解密响应。

我已经为这两个任务创建了一个 HttpInterceptor。

我能够加密请求并且它工作正常，但是在解密响应时我无法做到这一点。

注意：加密和解密都是异步方法：

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
  
    constructor(
        private router: Router,
    ) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return from(this.encryptRequest(req)).pipe(
        switchMap((data) => {
            return next.handle(data);
        }),
        tap(
            (event:any) => {
                if (event instanceof HttpResponse) {
                    this.decryptResponse(event).then((res:any)=>{
                      return next.handle(res);
                    });

                }else{
                    return event;
                }

            },
            (error):any => {
                  //......
            },
        ),
       
    );
    }

async encryptRequest(request: HttpRequest<any>) {
//..encryption logic
}

async decryptResponse(response: HttpResponse<any>) {
//...decryption logic
 }
    }

但是解密后的响应没有到达实际的 API 调用。

【问题讨论】：

标签： angular async-await angular-http-interceptors

【解决方案1】：

tap 运算符允许您使用可观察对象中发出的通知在可观察管道之外执行并行操作（副作用）。所以使用 tap 时在 observable 中发出的通知不会被转换。

要转换通知，您需要使用map 运算符之一。在这种情况下，由于您还希望将响应映射到异步进程，因此可以再次使用 switchMap 运算符。

return from(this.encryptRequest(req)).pipe(
  switchMap((data) => next.handle(data)),
  switchMap((event) =>
    event instanceof HttpResponse
      ? from(this.decryptResponse(event))
      : of(event)
  )
);

干杯

【讨论】：

谢谢，它的工作，也与 mergeMap 一起工作