Hentikan pipa di tengah

Question

Di aplikasi sudut saya, saya memiliki penyadapan penyegaran token yang mencegat kesalahan 401-Tidak Sah, mencoba menyegarkan token akses, dan melakukan permintaan http asli lagi.

Titik akhir penyegaran token juga dapat gagal dalam beberapa kasus, dan mengembalikan kesalahan yang diketahui (dalam kasus saya ini adalah kesalahan 400 invalid_grant).

Bagian interseptor yang menyegarkan token:

 return this.httpClient
  .request('POST', "token", { observe: 'response' })
  .pipe(
    map(response => {
      // some logic when the token was refreshed successfully
    }),
    catchError(err => {
      this.routingService.navigateToLoginNoQuery();
      return throwError(err); // a 400 - invalid_grant error
    })
  );

Ketika ini terjadi, ia akan mendapatkan operator catchError, yang melakukan 2 hal: logout (dengan pengalihan ke halaman login), dan mengembalikan throwError (error), error yang dilontarkannya adalah error 400-Invalid_grant.

Ini menyebabkan kesalahan baru datang ke beberapa operator catchError dalam fungsi yang awalnya memicu token penyegaran.

Hanya untuk konteks: Saya mencatat kesalahan di blok tangkapan, dan saya ingin menghindari pencatatan kesalahan semacam ini, karena biasanya hanya berarti bahwa token pengguna sudah kedaluwarsa.

Apa yang ingin saya lakukan adalah menghentikan rantai operator ini, dan langsung mengarahkan ke halaman login.

Apakah mungkin untuk menghentikan pipa di tengah, dan menghindari menangkap catchError luar dan operator berikutnya di dalam pipa?

Answer 1

Anda bisa mengembalikan kosong Observableuntuk mencegah kejadian atau kesalahan mencapai komponen yang akan dihancurkan:

return this.httpClient
  .request('POST', "token", { observe: 'response' })
  .pipe(
    map(response => {
      // some logic when the token was refreshed successfully
    }),
    catchError(err => {
      this.routingService.navigateToLoginNoQuery();
      return EMPTY;
    })
  );

Answer 2

Jika saya mengerti pertanyaannya benar, maka mungkin operator takeUntil dapat membantu Anda. Contoh akan terlihat seperti ini:

export class MyHttpInterceptor implements HttpInterceptor {
  anyError = new Subject();

  intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req)
      .pipe(
         takeUntil(this.anyError),
         catchError(err => {
             this.anyError.next();
             ...
         }
      )
  }
}