Angular 5 Http 拦截器实现 Token 验证

在 Angular 5 中，Http 模块负责与后端交互数据，在实际开发中，我们经常需要实现请求中 Token 的验证，以保护用户信息的安全性。本文将介绍使用 Angular 5 Http 拦截器实现 Token 验证的方法。

Http 拦截器简介

在 Angular 中，Http 拦截器是处理 Http 请求的关键。拦截器位于 Angular Http 请求生命周期的关键节点上。当应用执行 Http 请求时，每个请求都会经过拦截器序列，从而能够对请求进行变换、操作或者验证。

在 Angular 5 中，可以使用 @angular/common/http 中的 HttpClient 对象来访问后端服务，同时也可以使用它的拦截器机制实现 Http 请求的 Token 验证。

实现 Http Interceptor

实现 Http 拦截器需要实现 HttpInterceptor 接口中的 intercept 方法。该方法接收两个参数，一个是 HttpRequest 对象，另一个是 HttpHandler 对象。HttpRequest 对象包含请求的相关信息，而 HttpHandler 对象则负责处理请求，它可以将请求转发到下一个拦截器或者 Http 服务。

下面是一个示例代码，实现了一个 Http 拦截器。该拦截器通过 Token 验证保护请求的安全性。

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

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  // 定义需要保护的 URL
  private protectedUrls: string[] = ['/my/protected/url'];

  // 定义 Token
  private token: string = 'my-token';

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<any> {
    // 判断是否需要 Token 验证
    if (this.protectedUrls.some(url => req.url.indexOf(url) !== -1)) {
        // 向请求头中添加 Token
        req = req.clone({
            headers: req.headers.set('Authorization', `Bearer ${this.token}`)
        });
    }
    return next.handle(req);
  }
}

在该示例中，TokenInterceptor 实现了 HttpInterceptor 接口的 intercept 方法。首先根据 protectedUrls 定义需要进行 Token 验证的 URL，然后在 intercept 方法中对需要验证的 URL 生成一个新的 HttpRequest 对象，并向请求头中添加 Token。

需要注意的是，由于 HttpInterceptor 是一个 Injectable，因此我们需要在 @NgModule 的 providers 数组中加入该服务。

注册 Http Interceptor

在实现 Http Interceptor 之后，我们需要将其注册到 AppModule 中的 providers 数组中，以便让 Angular 认识该服务。

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 { TokenInterceptor } from './token.interceptor';

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

总结

在本文中，我们介绍了使用 Angular 5 Http 拦截器实现 Token 验证的方法。Http 拦截器在 Angular 中起到了重要的作用，通过它，我们可以对 Http 请求进行变换、操作或者验证。希望这篇文章能够对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a61610add4f0e0ffebf298