面试题：Angular HttpClient模块的拦截器应用与错误处理

创建HttpClient拦截器

首先，创建一个实现HttpInterceptor接口的类。在Angular中，需要从@angular/common/http导入相关内容。

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

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private router: Router) {}

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // 获取token，假设从本地存储获取
    const token = localStorage.getItem('token');
    let newRequest = request;
    if (token) {
      newRequest = request.clone({
        headers: request.headers.set('Authorization', `Bearer ${token}`)
      });
    }

    return next.handle(newRequest).pipe(
      catchError((error) => {
        if (error.status === 401) {
          // 重定向到登录页面
          this.router.navigate(['/login']);
        }
        throw error;
      })
    );
  }
}

全局注册拦截器

在app.module.ts文件中，在providers数组里注册拦截器。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './token.interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

在上述代码中，TokenInterceptor类实现了HttpInterceptor接口的intercept方法。在intercept方法里，首先尝试从本地存储获取token并添加到请求头中。然后通过next.handle(newRequest)将请求发送出去，并使用catchError操作符捕获错误。如果捕获到401错误，就通过Router导航到登录页面。在app.module.ts中，通过HTTP_INTERCEPTORS这个注入令牌，将TokenInterceptor以multi: true的方式注册，这样可以注册多个拦截器。

星途面试题库

面试题：Angular HttpClient模块的拦截器应用与错误处理

知识考点

面试题答案