Angular中如何让withXsrfConfiguration在环境初始化后生效？

问题根源 #

当前代码中，withXsrfConfiguration在模块初始化阶段就直接读取了xsrfOptions的默认值，而ENVIRONMENT_INITIALIZER的工厂函数要到应用初始化阶段才执行，导致配置更新后无法同步到HttpClient的XSRF设置中，最终动态配置不生效。

解决思路 #

放弃直接传递静态配置对象给withXsrfConfiguration，改用Angular内置的XSRF_CONFIG注入令牌，通过工厂函数动态获取初始化后的配置值，确保HttpClient使用的是最新的XSRF配置。

修改后的代码 #

// 保留XSRF配置接口
export interface XsrfConfig {
  cookieName: string;
  headerName: string;
}

@NgModule({
  imports: [
    CommonModule,
    // 其他导入模块
  ],
  providers: [
    // 动态提供XSRF配置，依赖DEFAULT_CONFIG获取最新值
    {
      provide: XSRF_CONFIG,
      useFactory: () => {
        // 注入你的全局默认配置
        const config = inject(DEFAULT_CONFIG);
        return {
          cookieName: config.xsrf.cookieName,
          headerName: config.xsrf.headerName
        };
      }
    },
    // 初始化HttpClient，无需再用withXsrfConfiguration
    provideHttpClient(
      withInterceptorsFromDi()
    ),
  ],
  declarations: [],
  exports: [],
})
export class YourModuleName {}

补充说明 #

1. 确保DEFAULT_CONFIG是已在应用中正确提供的注入令牌，其值在XSRF_CONFIG工厂函数执行前已完成初始化。
2. XSRF_CONFIG是Angular HttpClient内置的注入令牌，HttpClient会自动依赖这个令牌获取XSRF配置，无需额外调用withXsrfConfiguration。
3. 如果你的DEFAULT_CONFIG需要通过ENVIRONMENT_INITIALIZER异步初始化，可以将XSRF_CONFIG的工厂函数改为异步返回，或者确保ENVIRONMENT_INITIALIZER的执行优先级高于XSRF_CONFIG的初始化。

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