Angular2 中的拦截器

作者:编程家 分类: angular 时间:2025-11-02

### Angular2 中的拦截器

在 Angular2 中,拦截器是一种强大的机制,用于拦截并处理 HTTP 请求和响应。这个功能允许开发者在请求发送到服务器之前或响应返回给应用程序之前执行自定义的操作。通过拦截器,你可以实现诸如身份验证、日志记录、错误处理等全局性的功能,而无需在每个请求或响应中重复代码。

#### 拦截器的作用

拦截器允许你在请求发出和响应返回之间插入中间件逻辑。它们提供了一种优雅的方式来管理 HTTP 请求和响应,并使全局性任务得以简化和集中化处理。主要通过 `HttpInterceptor` 接口来实现自定义拦截器,该接口包含了 `intercept` 方法,该方法允许我们检查、修改并以可观察对象的形式返回请求。

#### 案例代码

让我们看一个简单的示例,演示如何使用拦截器来添加认证信息到 HTTP 请求的头部中。假设我们需要在每个请求中都包含用户的访问令牌。

typescript

import { Injectable } from '@angular/core';

import { HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';

@Injectable()

export class AuthInterceptor implements HttpInterceptor {

intercept(req: HttpRequest, next: HttpHandler) {

// 获取用户的访问令牌,这里假设存在一个 AuthService 来获取令牌

const authToken = this.authService.getAuthToken();

// 将令牌添加到请求头部

const authReq = req.clone({

headers: req.headers.set('Authorization', `Bearer ${authToken}`)

});

// 发送修改后的请求

return next.handle(authReq);

}

constructor(private authService: AuthService) {}

}

在上面的例子中,我们创建了一个 `AuthInterceptor` 类来实现 `HttpInterceptor` 接口。通过 `intercept` 方法,我们获取用户的访问令牌,并使用 `clone` 方法创建了一个新的请求,将令牌添加到了请求头部的 `Authorization` 字段中,然后使用 `next.handle` 方法将修改后的请求传递给下一个处理器。

####

拦截器是 Angular 中强大且灵活的工具,它们可以用于许多不同的用例,如身份验证、缓存管理、日志记录等。通过拦截器,我们可以简化和集中处理全局性任务,从而提高代码的可维护性和可重用性。在开发应用程序时,善用拦截器可以大幅改善代码的结构和性能。