Angular 2类外getClientSettings函数动态获取签名密钥问题

首先得明确：类外的getClientSettings是同步执行的，但HTTP请求是异步操作，直接在里面调接口拿不到值，必须先让请求在应用启动前完成，再把值传递过去。下面是具体实现步骤：

1. 封装密钥获取服务 #

先写一个服务来处理HTTP请求，同时缓存请求到的密钥，避免重复请求：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class KeyService {
  // 缓存请求到的密钥
  private signingKeys: string[] | null = null;

  constructor(private http: HttpClient) {}

  // 加载密钥，已加载过就直接返回缓存
  loadKeys(): Observable<string[]> {
    if (this.signingKeys) {
      return of(this.signingKeys);
    }
    // 替换成你的实际接口地址
    return this.http.get<string[]>('/api/signing-keys').pipe(
      tap(keys => this.signingKeys = keys),
      catchError(err => {
        console.error('加载签名密钥失败', err);
        return of([]);
      })
    );
  }

  // 获取已缓存的密钥
  getSigningKeys(): string[] | null {
    return this.signingKeys;
  }
}

2. 配置应用初始化钩子 #

在AppModule里用APP_INITIALIZER，确保应用启动前就完成密钥的加载，这样后续代码拿值时就是同步的：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { KeyService } from './key.service';

// 初始化函数，把异步请求转成Promise，等待请求完成再启动应用
function initApp(keyService: KeyService) {
  return () => keyService.loadKeys().toPromise();
}

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  providers: [
    KeyService,
    {
      provide: APP_INITIALIZER,
      useFactory: initApp,
      deps: [KeyService], // 注入密钥服务
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. 修改类外的配置函数 #

把原来的getClientSettings改成依赖注入的工厂函数，直接从KeyService拿已缓存的密钥：

// 修改后的版本，注入KeyService
export function getClientSettings(keyService: KeyService) {
  return {
    // 保留你的其他配置项
    signingKeys: keyService.getSigningKeys() || []
  };
}

4. 更新模块配置 #

如果之前是在模块里通过useFactory使用这个配置函数，现在要加上依赖注入声明：

// 假设你之前是这样配置的
@NgModule({
  providers: [
    { 
      provide: CLIENT_SETTINGS, // 替换成你实际的配置令牌
      useFactory: getClientSettings,
      deps: [KeyService] // 告诉Angular要注入KeyService
    }
  ]
})
export class SomeModule {}

这样就能确保getClientSettings执行时，密钥已经通过HTTP请求加载完成，不会出现拿不到值的问题。

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