Angular 9 中如何使用 HttpInterceptor 拦截请求-JavaScript中文网-JavaScript教程资源分享门户

Angular 是现今最流行的前端框架之一，它的主要特点是能够快速构建易于维护的大型应用程序。在 Angular 应用程序中，我们通常需要从后端服务进行数据交互。在这个过程中，我们需要处理异常和错误，为了更好的管理这些异常和错误，我们可以使用 HttpInterceptor。

HttpInterceptor 是一个拦截器接口，它可以在 Angular 应用程序的每一个请求和响应中处理请求，以便提高应用程序的可维护性和安全性。

在这篇文章中，我们将会深入了解 Angular 9 中如何使用 HttpInterceptor 拦截请求。

HttpInterceptor 是什么？

HttpInterceptor 是一个 Angular 中的拦截器，用于在发送 HTTP 请求前对请求进行修改，以及在接收 HTTP 响应时对响应进行处理。

我们可以在应用程序中注册多个拦截器，并按顺序处理它们，以实现不同的功能要求。

例如，我们可以为所有请求添加认证信息、加密数据、检查 CORS 设置等。我们还可以在响应返回前验证响应的内容和状态码。

如何使用 HttpInterceptor？

要向我们的应用程序添加 HttpInterceptor，我们需要实现 Angular HTTP 拦截器的接口：HttpInterceptor。

下面是一个最简化的 HttpInterceptor，只打印出每个发出请求的 URL。

@Injectable()
export class SimpleInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log(`Processing request: ${request.url}`);
        return next.handle(request);
    }
}

在这里，我们定义了一个名为 SimpleInterceptor 的类，它实现了 HttpInterceptor 接口，同时覆盖了其 intercept 方法。

intercept方法接受两个参数：

request: HttpRequest对请求进行处理的对象
next: HttpHandler 当前处理器不能自己处理该请求所以需要传递给下一个处理器处理请求的对象

在方法中，我们输出请求的 URL，然后调用 next.handle 方法来将请求传递给下一个拦截器或原始的 HttpClient 对象，以便请求能够继续被处理。

我们还需要将该拦截器添加到我们的 HTTP 客户端配置中。这里我们使用 PROGRESSIVE_WEB_APP_PROVIDERS 来实现，该配置提供了我们使用的所有必需 providers。

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

在这里，我们使用 Providers 模式将 SimpleInterceptor 注册到 Angular 的 HTTP_INTERCEPTORS 中。multi 告诉 Angular，“我将要向 Angular 提供一组 HTTP 拦截器，而不是单个拦截器。”

复杂的 HttpInterceptor

上面的 HttpInterceptor 只是一个简单的例子，在实际应用中，我们需要更复杂的拦截器。这里，我们演示一个更高级的例子，拦截每个请求并为其添加 JWT 认证。

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private authService: AuthService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authToken = this.authService.getAuthToken();

        if (authToken) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${authToken}`
                }
            });
        }

        return next.handle(request).pipe(
            tap((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    console.log(`Processing response: ${request.url}`);
                }
            }, (error) => {
                console.error(error);
            })
        );
    }
}

在这里，我们定义了一个名为 AuthInterceptor 的类，它还是实现 HttpInterceptor 接口。

在其 intercept 方法中，我们首先获取了通过注入 AuthService 包装过的认证 Token。如果存在 Token，则将 Authorization 标头添加到 request 中。这实现了 JWT 鉴权。

注意，我们使用了 request.clone() 方法，这是因为 HttpRequest 对象是不可变的，所以我们必须创建一个新的 HttpRequest 对象，将 'Authorization' 标头添加到其中。

在请求返回时，我们可以检查响应是否为 HttpResponse 并输出它的 URL。

最后，拦截器还使用 tap 操作符在发出请求之前和收到响应之后捕获错误和输出日志。tap 操作符是 Observable 的一种变体，它使我们能够监听流，而不会改变数据流本身。

最后，我们将新的 AuthInterceptor 添加到 HTTP 客户端配置中：

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

我们还需要一个 AuthService，这个 Service 来实现获取 Token 的逻辑。

@Injectable({ providedIn: 'root' })
export class AuthService {
    private readonly authToken = '...';

    getAuthToken(): string {
        return this.authToken;
    }
}

示例代码

完整的示例代码可以参考如下 Github 仓库：

https://github.com/angular-ui/interceptors

总结

在本篇文章中，我们学习了什么是 HttpInterceptor，以及如何使用 Angular 9 中的 HttpInterceptor。我们还提供了一些实际的示例代码，帮助你更深入地了解如何使用拦截器在你的应用程序中处理请求和响应。

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