Angular6 教程：如何使用 Http 拦截器来添加 Token

相信大家都知道，Http 拦截器是 Angular 6 中最新的一个特性，它可以在 Http 请求或响应被发送或接收之前或之后进行一些操作，让我们可以对请求或响应进行一些控制和改变，以达到一些更优秀的应用场景。本文将介绍如何使用 Http 拦截器来添加 Token，以达到在请求中添加身份验证信息的目的。

1. 获取 Token

首先，我们需要获取 Token，这里以登录为例，假设我们的后端接口为 api/login，发送用户名和密码给后端，后端返回 Token。

示例代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) { }

  login(username: string, password: string): Observable<boolean> {
    return this.http.post<any>('api/login', { username: username, password: password })
      .map(response => {
        let token = response.token;
        if (token) {
          localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token }));
          return true;
        } else {
          return false;
        }
      });
  }

  logout(): void {
    localStorage.removeItem('currentUser');
  }
}

在这里，我们使用了 HttpClient 发送了一个 Post 请求，发送了用户名和密码，如果返回的数据中存在 Token，则将其保存在本地存储中。如果没有 Token，则认为登录失败。

2. 实现 Http 拦截器

现在，我们实现一个 Http 拦截器，以在每次请求时自动添加 Token。

示例代码：

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

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${currentUser.token}`
                }
            });
        }

        return next.handle(request);
    }
}

在这里，我们定义了一个名为 JwtInterceptor 的服务，并实现了 HttpInterceptor 接口。intercept 函数将被执行，每次 Http 请求都会经过它。在这里，我们首先通过本地存储获取 Token，然后将 Token 加入到请求头的 Authorization 中。

3. 注册 Http 拦截器

最后，在 app.module.ts 中注册 JwtInterceptor，将其添加到 providers 数组中。

示例代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
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 { }

现在，我们就可以在每次发送 Http 请求时，自动添加 Token 以进行身份验证。

总结

在本文中，我们介绍了 Angular6 中如何使用 Http 拦截器来添加 Token，以达到在每次请求中自动添加身份验证信息的目的。通过使用 Http 拦截器，我们可以更加方便地进行身份验证，并提升用户体验。

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