角度拦截器内部的异步问题

Question

I have an interceptor that checks if a condition is true it opens a snackbar and wait for the user to click a button ( so subscribe to button observer event ). If false: it returns the request.

intercept(req: HttpRequest<any>,
  next: HttpHandler): Observable<HttpEvent<any>> {
  if (this.rightsService.actualCookies && this.cookiesService.get('cookie') !== this.rightsService.actualCookies) {
    const snackBarRef = this.snackBar.open('Session expired', 'refresh');
    snackBarRef.onAction().subscribe(() => {
      window.location.pathname = window.location.pathname.split('/')[0]
    });
  }
  else {
      return next.handle(req);
  }
}

My issue is that if condition is true the interceptor don't wait for the observable and I think that it returns a void response. thats why other interceptors are getting error :

Cannot read property 'pipe' of undefined

in line

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
   return next.handle(request).pipe(

My question is how to disable interceptor to return a value if (this.rightsService.actualCookies && this.cookiesService.get('cookie') !== this.rightsService.actualCookies) is true

Answer 1

your interceptor MUST return something:

intercept(req: HttpRequest<any>,
  next: HttpHandler): Observable<HttpEvent<any>> {
  if (this.rightsService.actualCookies && this.cookiesService.get('cookie') !== this.rightsService.actualCookies) {
    const snackBarRef = this.snackBar.open('Session expired', 'refresh');
    // angular will subscribe. do whatever you need to do in tap.
    return snackBarRef.onAction().pipe(tap(() => {
      window.location.pathname = window.location.pathname.split('/')[0]
    }));
  }
  else {
      return next.handle(req);
  }
}