面试题：Angular的HttpClient模块认证机制与拦截器

Question

在Angular应用中，如何利用HttpClient的拦截器（Interceptor）来实现基于JWT（JSON Web Token）的安全认证机制？请详细阐述实现思路并给出关键代码示例。

Answer 1

实现思路

1. 创建拦截器类：实现 HttpInterceptor 接口，在 intercept 方法中处理请求。
2. 获取 JWT 令牌：从本地存储或其他存储方式中获取 JWT 令牌。
3. 添加令牌到请求头：将 JWT 令牌添加到每个 HTTP 请求的 Authorization 头中。
4. 注册拦截器：在 Angular 的模块中注册该拦截器。

关键代码示例

1. 创建拦截器类

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

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // 从本地存储获取 JWT 令牌
    const token = localStorage.getItem('jwt_token');

    if (token) {
      // 克隆请求并添加 JWT 到请求头
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`,
        },
      });
    }

    return next.handle(request);
  }
}

2. 注册拦截器 在 app.module.ts 中注册拦截器：

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

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