非异步方法中如何处理Promise？RXJS与angular-auth-oidc-client配置加载问题

核心思路 #

把后端请求/Store获取的异步结果统一转换成Observable<OpenIdConfiguration[]>，避免Promise嵌套或Observable嵌套，确保返回类型符合OidcConfigLoader的要求。

1. 改造CustomConfigService的getConfigs$方法 #

根据你的数据源（后端HTTP/Store/Promise）选择对应实现，最终返回单层Observable数组：

import { Injectable } from '@angular/core';
import { Observable, from, of } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
import { OpenIdConfiguration } from 'angular-auth-oidc-client';
import { HttpClient } from '@angular/common/http';
// 若使用NgRx Store，引入相关依赖
import { Store } from '@ngrx/store';
import { selectClientList } from './store/selectors';

@Injectable({ providedIn: 'root' })
export class CustomConfigService {
  constructor(
    private http: HttpClient,
    private store: Store // 仅使用Store时保留
  ) {}

  getConfigs$(): Observable<OpenIdConfiguration[]> {
    // 场景1：直接通过HttpClient请求后端（推荐，原生返回Observable）
    return this.http.get<Client[]>('/api/clients').pipe(
      map(clients => {
        // 把后端返回的客户端数据映射为OpenIdConfiguration数组
        return clients.map(client => ({
          clientId: client.clientId,
          authority: client.authorityUrl,
          redirectUrl: `${window.location.origin}/auth-callback`,
          postLogoutRedirectUri: window.location.origin,
          responseType: 'code',
          scope: 'openid profile email',
          // 补充其他必填配置项
        } as OpenIdConfiguration));
      })
    );

    // 场景2：后端请求是Promise（比如旧代码用fetch），用from()转为Observable
    /*
    const clientFetchPromise = fetch('/api/clients').then(res => res.json());
    return from(clientFetchPromise).pipe(
      map(clients => clients.map(client => ({
        clientId: client.clientId,
        authority: client.authorityUrl,
        // 其他配置
      } as OpenIdConfiguration)))
    );
    */

    // 场景3：从NgRx Store获取，用switchMap扁平化嵌套Observable
    /*
    return this.store.select(selectClientList).pipe(
      switchMap(clients => {
        // 若Store返回的是Observable<Client[]>，直接map转换
        return of(clients).pipe(
          map(list => list.map(client => ({
            clientId: client.clientId,
            authority: client.authorityUrl,
            // 其他配置
          } as OpenIdConfiguration)))
        );
      })
    );
    */
  }
}

// 定义后端返回的Client类型（按需调整）
interface Client {
  clientId: string;
  authorityUrl: string;
  // 其他后端返回字段
}

2. 配置httpLoaderFactory #

确保工厂函数返回的OidcConfigLoader符合要求，直接返回getConfigs$()的结果：

import { OidcConfigLoader } from 'angular-auth-oidc-client';
import { CustomConfigService } from './custom-config.service';

export function httpLoaderFactory(configService: CustomConfigService): OidcConfigLoader {
  // 直接返回Observable<OpenIdConfiguration[]>，符合loader的签名要求
  return () => configService.getConfigs$();
}

// 在AuthModule中配置
@NgModule({
  imports: [
    AuthModule.forRoot({
      loader: {
        provide: OidcConfigLoader,
        useFactory: httpLoaderFactory,
        deps: [CustomConfigService]
      }
    })
  ]
})
export class AuthSetupModule {}

关键注意点 #

• 不要用async/await：async方法会强制返回Promise，破坏Observable的链式调用，改用RxJS的from()处理Promise
• 扁平化嵌套Observable：如果遇到Observable<Observable<T>>，用switchMap/mergeMap把它转换成Observable<T>
• 严格匹配返回类型：最终必须返回Observable<OpenIdConfiguration[]>，不能是数组或嵌套Observable，否则angular-auth-oidc-client的loader会报错

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