Angular配置HTTP拦截器后控制台仍出现401错误，求解决

你的代码里拦截器配置了catchError并返回EMPTY，但控制台仍出现401错误，大概率是以下几个原因导致：

1. 拦截器未正确注册 #

Angular拦截器必须在模块的providers中声明才能生效，若未完成这一步，拦截器根本不会起作用，错误会直接抛出到控制台。

检查你的AppModule（或核心模块）是否添加了如下配置：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './path/to/auth.interceptor';

@NgModule({
  // ...其他模块配置
  providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: AuthInterceptor, 
      multi: true 
    }
  ]
})
export class AppModule { }

2. 组件订阅未处理错误流 #

你组件中onLogged方法的subscribe只定义了next回调，没有处理error回调。如果拦截器因未注册等原因没捕获到错误，错误会直接冒泡到这里，而未处理的Observable错误会被Angular默认打印到控制台。

可以给订阅添加error回调兜底：

onLogged() {
    this.auth.login(this.user).subscribe({
        next: (data: any) => {
            console.log('Connection established.');
            let token = data.headers.get('Authorization')!;
            this.auth.saveToken(token);
            this.router.navigate(['/']);
        },
        error: (err) => {
            // 可添加登录失败提示逻辑
            console.log('登录失败:', err);
        }
    });
}

3. 拦截器错误处理逻辑存在潜在问题 #

• 确保错误类型判断准确：有些情况下错误对象可能不是HttpErrorResponse，导致状态判断失效，可补充类型校验：

catchError((error: any) => {
    if (error instanceof HttpErrorResponse && [401, 403].includes(error.status)) {
        console.log('Access denied to the ressource.');
    }
    return EMPTY;
})

• 确认EMPTY导入正确：需从rxjs导入EMPTY，否则错误处理逻辑会失效：

import { EMPTY } from 'rxjs';

额外说明 #

如果控制台的401是Network标签里请求的状态码（而非代码抛出的错误日志），属于正常现象——拦截器仅处理应用层面的错误流，不会屏蔽浏览器网络请求的状态显示。

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