面试题：Angular中HttpClient模块安全认证机制基础

Question

请简述Angular的HttpClient模块常用的安全认证机制有哪些，以及如何在HttpClient请求中添加基本认证（Basic Authentication）头信息？

Answer 1

Angular的HttpClient模块常用的安全认证机制

1. 基本认证（Basic Authentication）：客户端将用户名和密码进行Base64编码后放在请求头中发送给服务器。服务器接收到请求后解码并验证用户名和密码。虽然简单，但不适合敏感数据传输，因为Base64编码可轻易解码。
2. Bearer Token认证：客户端从认证服务器获取一个令牌（token），在后续请求中将这个令牌放在Authorization头中，格式为 Bearer <token>。服务器通过验证这个令牌来确认请求的合法性。适用于分布式系统和单点登录场景。
3. OAuth（开放授权）：一种授权框架，允许用户授权第三方应用访问他们存储在另一个服务提供商上的资源，而无需将用户名和密码提供给第三方应用。OAuth有不同版本，如OAuth 1.0a和OAuth 2.0 。

在HttpClient请求中添加基本认证头信息

1. 使用HttpHeaders和set方法

   import { Injectable } from '@angular/core';
   import { HttpClient, HttpHeaders } from '@angular/common/http';
   
   @Injectable({
     providedIn: 'root'
   })
   export class ApiService {
     constructor(private http: HttpClient) {}
   
     private getBasicAuthHeader(username: string, password: string) {
       const headers = new HttpHeaders({
         Authorization: 'Basic'+ btoa(`${username}:${password}`)
       });
       return headers;
     }
   
     public getData() {
       const username = 'yourUsername';
       const password = 'yourPassword';
       const headers = this.getBasicAuthHeader(username, password);
       return this.http.get('your-api-url', { headers });
     }
   }
   

2. 使用interceptor（拦截器）
   • 首先创建一个拦截器类：

   import { Injectable } from '@angular/core';
   import {
     HttpEvent,
     HttpHandler,
     HttpInterceptor,
     HttpRequest
   } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable()
   export class BasicAuthInterceptor implements HttpInterceptor {
     constructor() {}
   
     intercept(
       request: HttpRequest<any>,
       next: HttpHandler
     ): Observable<HttpEvent<any>> {
       const username = 'yourUsername';
       const password = 'yourPassword';
       const headers = new HttpHeaders({
         Authorization: 'Basic'+ btoa(`${username}:${password}`)
       });
       const authReq = request.clone({ headers });
       return next.handle(authReq);
     }
   }
   

   • 然后在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 { BasicAuthInterceptor } from './basic - auth.interceptor';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, HttpClientModule],
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: BasicAuthInterceptor,
         multi: true
       }
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

这样，所有通过HttpClient发出的请求都会带上基本认证头信息。