在Angular中通过HTTP请求设置angular-auth-oidc-client的配置值

要实现通过HTTP请求动态填充OIDC的authority和clientId，核心思路是在应用启动前先获取配置数据，再将其注入到OIDC配置中。以下是具体实现步骤：

1. 创建配置服务 #

编写专门的服务负责从后端获取并存储动态配置：

// src/app/services/config.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

export interface DynamicOidcConfig {
  authority: string;
  clientId: string;
}

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private dynamicConfig: DynamicOidcConfig | null = null;

  constructor(private http: HttpClient) {}

  // 从后端接口获取配置
  loadConfig(): Observable<DynamicOidcConfig> {
    return this.http.get<DynamicOidcConfig>('/api/config/oidc').pipe(
      catchError(err => {
        console.error('加载OIDC配置失败:', err);
        // 可选：返回默认配置避免应用崩溃
        return of({ authority: '', clientId: '' });
      })
    );
  }

  // 获取已加载的配置
  getOidcConfig(): DynamicOidcConfig | null {
    return this.dynamicConfig;
  }

  // 保存加载后的配置
  setOidcConfig(config: DynamicOidcConfig): void {
    this.dynamicConfig = config;
  }
}

2. 配置APP_INITIALIZER确保启动前加载配置 #

在AppModule中配置APP_INITIALIZER，让应用启动前先完成配置请求：

// src/app/app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ConfigService } from './services/config.service';

// 定义初始化函数
function initializeApp(configService: ConfigService) {
  return () => configService.loadConfig().toPromise().then(config => {
    configService.setOidcConfig(config);
  });
}

@NgModule({
  imports: [HttpClientModule],
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule {}

3. 动态注入OIDC配置 #

在配置OIDC服务的位置（比如AuthModule或AppModule），注入ConfigService并覆盖环境变量中的静态值：

// 示例：在auth.module.ts中配置OIDC
import { NgModule } from '@angular/core';
import { AuthModule, LogLevel } from 'angular-auth-oidc-client';
import { environment } from '../environments/environment';
import { ConfigService } from './services/config.service';

@NgModule({
  imports: [
    AuthModule.forRoot({
      config: (configService: ConfigService) => {
        const oidcConfig = configService.getOidcConfig();
        return {
          ...environment.oidc,
          authority: oidcConfig?.authority || environment.oidc.authority,
          clientId: oidcConfig?.clientId || environment.oidc.clientId,
          logLevel: LogLevel.Debug
        };
      }
    })
  ]
})
export class AuthModule {}

注意事项 #

• 确保后端接口/api/config/oidc返回正确JSON格式：{"authority": "你的授权地址", "clientId": "你的客户端ID"}
• 若配置请求失败，可在loadConfig的catchError中返回默认值，避免应用启动崩溃
• 若使用其他OIDC库，核心逻辑一致：先获取动态配置，再覆盖静态配置

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