Angular HttpInterceptor分别对请求和响应进行加解密

Question

在 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 调用。

Answer 1

tap 运算符允许您使用可观察对象中发出的通知在可观察对象管道之外执行并行操作 (side-effects)。因此，使用 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)
  )
);

干杯

Angular HttpInterceptor分别对请求和响应进行加解密

Angular HttpInterceptor to encrypt and decrypt request and response respectively

async-await

angular-http-interceptors

angular