Angular 17独立模式整合Keycloak授权头自动添加问题排查

在Angular 17独立模式应用中整合Keycloak时，遇到Keycloak无法自动为后端请求添加Authorization头的问题。出于安全考虑，希望避免手动处理授权令牌。

已完成以下操作：

• 安装Keycloak库：npm install keycloak-angular
• 添加Keycloak初始化提供者
• 编写登录及请求测试代码

上述代码在Angular非独立模式（NgModule）下运行正常，但切换到Angular 17独立模式后失效。手动配置authInterceptorProvider拦截器添加Token可以正常工作，但不想采用这种方式。

请问可能遗漏或配置错误了什么？

代码片段 #

简化后的应用配置 #

export const initializeKeycloak = (keycloak: KeycloakService) => {
return () =>
  keycloak.init({
    config: {
      url: 'http://localhost:8180/',
      realm: 'balbliblub-realm',
      clientId: 'blabliblubi-public-client',
    },
    initOptions: {
      pkceMethod: 'S256',
      redirectUri: 'http://localhost:4200/dashboard',
    },
    loadUserProfileAtStartUp: false
  });}


export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes),
  provideHttpClient(
    withFetch(),
    withXsrfConfiguration(
    {
      cookieName: 'XSRF-TOKEN',
      headerName: 'X-XSRF-TOKEN',
    })
  ),

  authInterceptorProvider,
  importProvidersFrom(HttpClientModule, KeycloakBearerInterceptor),
  {
    provide: APP_INITIALIZER,
    useFactory: initializeKeycloak,
    multi: true,
    deps: [KeycloakService],
  },
  KeycloakService,
]};

AppComponent代码 #

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
  title = 'testy';
  public isLoggedIn = false;
  public userProfile: KeycloakProfile | null = null;

  constructor(private readonly keycloak: KeycloakService,
              private http: HttpClient) { }

  public async ngOnInit() {
    this.isLoggedIn = await this.keycloak.isLoggedIn();

    if (this.isLoggedIn) {
      this.userProfile = await this.keycloak.loadUserProfile();
    }
  }

  login() {
    this.keycloak.login();
  }

  protected loadAbos() {
    this.http.get<Abo[]>('http://localhost:8080/api/abos?email=' + this.userProfile?.email, { observe: 'response',withCredentials: true })
      .pipe(
        catchError(err => this.handleError("Could not load abos", err)),
        tap(abos => {
          console.info("loaded abos", abos);
        })
      ).subscribe()
  }

问题核心是独立模式下KeycloakBearerInterceptor的注册方式错误，以及HttpClient配置冲突，调整后即可恢复自动加令牌功能：

1. 清理冲突的HttpClient配置 #

Angular 17独立模式下，provideHttpClient()完全替代了HttpClientModule，两者共存会导致拦截器失效。直接删除importProvidersFrom中的HttpClientModule。

2. 正确注册KeycloakBearerInterceptor #

独立模式下需通过withInterceptorsFromDi()启用依赖注入式拦截器，再单独注册KeycloakBearerInterceptor为HTTP拦截器：

修改provideHttpClient部分：

provideHttpClient(
  withFetch(),
  withXsrfConfiguration({
    cookieName: 'XSRF-TOKEN',
    headerName: 'X-XSRF-TOKEN',
  }),
  withInterceptorsFromDi() // 启用DI方式加载拦截器
),

添加拦截器提供者：

{
  provide: HTTP_INTERCEPTORS,
  useClass: KeycloakBearerInterceptor,
  multi: true,
  deps: [KeycloakService]
},

3. 移除手动拦截器 #

既然要使用Keycloak自带的拦截器，手动的authInterceptorProvider会造成冲突，从providers数组中移除它。

修改后的完整appConfig #

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(
      withFetch(),
      withXsrfConfiguration({
        cookieName: 'XSRF-TOKEN',
        headerName: 'X-XSRF-TOKEN',
      }),
      withInterceptorsFromDi()
    ),
    {
      provide: HTTP_INTERCEPTORS,
      useClass: KeycloakBearerInterceptor,
      multi: true,
      deps: [KeycloakService]
    },
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService],
    },
    KeycloakService,
  ]
};

额外检查 #

确认Keycloak客户端（blabliblubi-public-client）配置中，后端API的域名已加入“Web Origins”列表，避免CORS问题导致令牌无法正常传递。

内容的提问来源于stack exchange，提问作者Marc-Antoine Bruelhart