使用HttpInterceptorFn时HttpContextToken始终为false的问题排查

一、函数式拦截器与类拦截器的核心差异 #

两者在HttpContext的处理逻辑上无本质差异，核心区别在于实现方式和注册机制：

• 类拦截器：依赖HttpInterceptor接口，需通过provideHttpClient(withInterceptorsFromDi())注册，依赖DI容器，可通过构造函数注入服务。
• 函数式拦截器：以独立函数形式实现，通过provideHttpClient(withInterceptors([...]))注册，轻量化设计，无需类结构，可通过inject()在函数内部获取依赖服务。

二、POST请求SkipLoading Token失效的解决步骤 #

1. 确认SkipLoading Token定义正确性 #

确保Token定义符合标准格式，默认值设为false：

export const SkipLoading = new HttpContextToken<boolean>(() => false);

2. 检查POST请求的Context传递逻辑 #

POST请求失效大概率是因为构建请求时未显式携带HttpContext，需修正请求代码：

错误示例（未携带Context）：

this.http.post('/api/refresh-token', { token: refreshToken });

正确写法（显式设置Context）：

// 方式1：直接在请求配置中设置
this.http.post('/api/refresh-token', { token: refreshToken }, {
  context: new HttpContext().set(SkipLoading, true)
});

// 方式2：单独创建Context再传递
const requestContext = new HttpContext().set(SkipLoading, true);
this.http.post('/api/refresh-token', payload, { context: requestContext });

3. 验证拦截器中Token读取逻辑 #

函数式拦截器中需直接从request.context读取Token，确保代码逻辑正确：

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const skipLoading = req.context.get(SkipLoading);
  
  if (!skipLoading) {
    // 显示加载Spinner
    const loadingService = inject(LoadingService);
    loadingService.show();
  }

  return next(req).pipe(
    finalize(() => {
      if (!skipLoading) {
        // 隐藏加载Spinner
        inject(LoadingService).hide();
      }
    })
  );
};

4. 排查多拦截器的Context丢失问题 #

若存在多个拦截器，需检查后续拦截器克隆请求时是否传递了原context：

错误示例（克隆请求时丢失Context）：

const newReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ...') });
return next(newReq);

正确写法（保留原Context）：

const newReq = req.clone({ 
  headers: req.headers.set('Authorization', 'Bearer ...'),
  context: req.context // 关键：传递原请求的Context
});
return next(newReq);

总结 #

函数式与类拦截器对HttpContext的处理逻辑完全一致，POST请求的Token失效问题几乎都是请求构建时未携带Context，或后续拦截器克隆请求时丢失Context导致，按上述步骤排查即可解决。

内容的提问来源于stack exchange，提问作者Asad Koths