如何获取Angular中HttpClientXsrfModule配置的XSRF参数？

在Angular中配置XSRF防护时，可通过HttpClientXsrfModule.withOptions指定自定义Cookie与请求头名称，示例代码如下：

imports: [
  HttpClientModule,
  HttpClientXsrfModule.withOptions({
    cookieName: 'My-Xsrf-Cookie',
    headerName: 'My-Xsrf-Header',
  }),
],

很多开发者会有疑问：后续在自定义服务、拦截器或组件中，能不能直接获取这些配置好的值？

查看Angular源码会发现，xsrf.ts文件里定义了XSRF_COOKIE_NAME和XSRF_HEADER_NAME两个注入令牌，但直接尝试导入注入时会报错：

import { XSRF_HEADER_NAME } from '@angular/common/http'; // ERROR: Module "@angular/common/http" has no exported member 'XSRF_HEADER_NAME'.ts(2305)
import { Inject, Injectable } from '@angular/core';

@Injectable()
export class MyService {
  public constructor(
    @Inject(XSRF_HEADER_NAME) private readonly _xsrfHeaderName: string,
  ) {}
}

这是因为这两个注入令牌属于Angular的内部API，并没有对外公开导出，所以无法通过@angular/common/http直接导入使用。

目前Angular官方并没有提供直接获取这些配置值的公开API，不过可以通过以下两种方式实现需求：

• 复用共享配置对象
  提前定义一个共享的配置对象，在HttpClientXsrfModule.withOptions和需要使用配置的服务/组件中同时引用，避免重复定义：

  // 定义共享的XSRF配置
  export const XSRF_CONFIG = {
    cookieName: 'My-Xsrf-Cookie',
    headerName: 'My-Xsrf-Header',
  };
  
  // 在模块配置中使用
  imports: [
    HttpClientModule,
    HttpClientXsrfModule.withOptions(XSRF_CONFIG),
  ],
  
  // 在自定义服务中直接使用
  @Injectable()
  export class MyService {
    readonly xsrfCookieName = XSRF_CONFIG.cookieName;
    readonly xsrfHeaderName = XSRF_CONFIG.headerName;
  }
  

• 自定义注入令牌
  如果需要通过依赖注入的方式获取配置值，可以创建自定义的注入令牌，并在模块中提供对应的配置值：

  import { InjectionToken, NgModule } from '@angular/core';
  import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
  
  // 定义自定义注入令牌
  export const XSRF_COOKIE_NAME = new InjectionToken<string>('XSRF_COOKIE_NAME');
  export const XSRF_HEADER_NAME = new InjectionToken<string>('XSRF_HEADER_NAME');
  
  // 定义XSRF配置
  const xsrfConfig = {
    cookieName: 'My-Xsrf-Cookie',
    headerName: 'My-Xsrf-Header',
  };
  
  @NgModule({
    imports: [
      HttpClientModule,
      HttpClientXsrfModule.withOptions(xsrfConfig),
    ],
    providers: [
      { provide: XSRF_COOKIE_NAME, useValue: xsrfConfig.cookieName },
      { provide: XSRF_HEADER_NAME, useValue: xsrfConfig.headerName },
    ],
  })
  export class AppModule {}
  
  // 在自定义服务中注入使用
  import { Inject, Injectable } from '@angular/core';
  
  @Injectable()
  export class MyService {
    constructor(
      @Inject(XSRF_COOKIE_NAME) private readonly xsrfCookieName: string,
      @Inject(XSRF_HEADER_NAME) private readonly xsrfHeaderName: string
    ) {}
  }
  

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