初始化 keycloak 服务时未定义文档

Question

我正在开发需要集成 keycloak 的角度应用程序。我使用 Angular 18 和 keycloak.ja 24.0.2 版本。

这是 keycloak 服务启动的代码。

import Keycloak from 'keycloak-js';
import { KeycloakService } from 'keycloak-angular';

export function initializeKeycloak(keycloak: KeycloakService): () => Promise<boolean> 
{
  return (): Promise<boolean> =>
  keycloak.init({
  config: {
    url: 'http://localhost:8080/auth',
    realm: 'MyRealm',
    clientId: 'angular-app',
  },
  initOptions: {
    onLoad: 'login-required',
  },
});
}

仅供参考，这是app.config

export const appConfig: ApplicationConfig = {
 providers: 
  [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), 
  provideClientHydration(), KeycloakService,
 {
  provide: APP_INITIALIZER,
  useFactory: initializeKeycloak,
  multi: true,
  deps: [KeycloakService]
  }
 ]

};

提前致谢

Answer 1

根据这个 github 问题，您需要将 init 包装在 if 条件中，并仅在

keycloak

存在时执行它。

import Keycloak from 'keycloak-js';
import { KeycloakService } from 'keycloak-angular';

export function initializeKeycloak(keycloak: KeycloakService): () => Promise<boolean> 
{
  return (): Promise<boolean> => {
    if(typeof window !== 'undefined') {
      return keycloak.init({
        config: {
          url: 'http://localhost:8080/auth',
          realm: 'MyRealm',
          clientId: 'angular-app',
        },
        initOptions: {
          onLoad: 'login-required',
        },
      });
    } else {
        return new Promise<Boolean>((resolve, reject) => {
          resolve(true);
        });
    }
  }
}