Angular 18 系列（二十三）HttpClient 拦截器 Interceptors 使用

小渣渣

需求：在 Angular 框架是基于 HttpClient 发送 HTTP 请求，HttpClient 支持一种称为拦截器的中间件，通过在发送所有 HTTP 请求的时候，我们希望携带上认证信息（例如：Token），通过实现 HttpInterceptor 中的 intercept 方法就很容易实现。

首先，新建一个 Angular 项目，命令如下：

登录可见。

然后通过 cli 命令创建拦截器，命令如下：

登录可见。

拦截器功能输出请求的 URL 链接，并且增加请求头，http-auth-interceptor.service.ts 源码如下：

登录可见。

修改 app.config.ts 文件，添加该配置，如下：

登录可见。

尝试在组件中发送 HTTP 请求，代码如下：

登录可见。

效果图如下：



参考：https://angular.dev/guide/http/interceptors

小渣渣

HttpAuthInterceptorService 源码：

登录可见。