Angular 4拦截器处理响应后，组件无法显示登录失败提示求助

Hey there! Let’s figure out how to get your component to show that 'Login failed' message again now that you’ve moved error handling to an interceptor. I totally get being stuck when you’re still learning Angular—let’s break this down step by step.

The Root Problem #

When you use catchError in your interceptor, if you don’t re-throw the error, the observable stream gets "swallowed" and your component’s subscribe error callback never fires. That’s exactly why your component can’t sense the login failure anymore.

Solution 1: Re-throw the Error from the Interceptor #

The simplest fix is to handle your global error logic in the interceptor, then pass the error back to the component by re-throwing it. Here’s how to adjust your interceptor code:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class AuthErrorInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // Handle global error logic here (e.g., log the error, check for expired tokens)
        if (error.status === 401 && error.error?.message === 'Invalid credentials') {
          console.log('Login failure detected in interceptor');
        }

        // Critical step: Re-throw the error so the component can catch it
        return throwError(() => error);
      })
    );
  }
}

Then in your component, you can catch the error as usual and display your message:

login(username: string, password: string) {
  this.authService.login({ username, password }).subscribe({
    next: (userData) => {
      // Handle successful login (e.g., navigate to dashboard)
      this.router.navigate(['/dashboard']);
    },
    error: (error) => {
      // Now this callback will trigger!
      if (error.status === 401 && error.error?.message === 'Invalid credentials') {
        this.errorMessage = 'Login failed';
      }
    }
  });
}

Solution 2: Use a Shared Service to Broadcast Errors #

If you want a more flexible approach (like showing errors in multiple components), create a shared error notification service to broadcast errors from the interceptor.

First, create the service:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ErrorAlertService {
  private errorStream = new Subject<HttpErrorResponse>();
  public error$ = this.errorStream.asObservable();

  sendError(error: HttpErrorResponse) {
    this.errorStream.next(error);
  }
}

Update your interceptor to use this service:

// Inject the service in your interceptor constructor
constructor(private errorAlertService: ErrorAlertService) {}

// Inside the catchError block
this.errorAlertService.sendError(error);
// Optional: Re-throw if you still want component-level error handling
return throwError(() => error);

Then subscribe to the service in your component:

import { ErrorAlertService } from './error-alert.service';

// In your component class
errorMessage: string = '';

constructor(private errorAlertService: ErrorAlertService) {}

ngOnInit() {
  this.errorAlertService.error$.subscribe((error) => {
    if (error.status === 401 && error.error?.message === 'Invalid credentials') {
      this.errorMessage = 'Login failed';
    }
  });
}

Key Takeaway #

Your interceptor was "hiding" the error from the component by not passing it along. Either re-throw the error or use a shared service to broadcast it, and your component will be able to display that login failure message again.

内容的提问来源于stack exchange，提问作者Samarek