Angular集成keycloak-js：如何避免重复初始化SecurityService的keycloak实例

你的核心痛点是每次调用认证方法都要重复初始化Keycloak实例，既冗余又容易导致实例不一致。下面是针对性的优化方案，确保keycloak属性始终对应当前SessionStorage中的Realm，无需手动重复调用init()。

修改后的SecurityService完整代码 #

import {Injectable} from '@angular/core';
import Keycloak from "keycloak-js";

@Injectable({
  providedIn: 'root'
})
export class SecurityService {
  // 初始设为undefined，避免创建无用的空实例
  private keycloak?: Keycloak;
  private readonly keycloakBaseUrl = 'http://mykeycloakserver:8080/';

  constructor() {
    // 应用启动时检查SessionStorage中是否有已保存的realm，提前初始化实例
    const savedRealm = sessionStorage.getItem('realm');
    if (savedRealm) {
      this.createKeycloakInstance(savedRealm);
    }
  }

  /**
   * 获取或创建匹配当前Realm的Keycloak实例
   * 若当前实例的realm与SessionStorage中的不一致，则重新创建
   */
  private getOrCreateKeycloakInstance(): Keycloak | undefined {
    const currentRealm = sessionStorage.getItem('realm');
    if (!currentRealm) return undefined;

    // 检查现有实例是否有效且匹配当前realm
    if (this.keycloak && this.keycloak.realm === currentRealm) {
      return this.keycloak;
    }

    // 实例不匹配或不存在，创建新实例
    return this.createKeycloakInstance(currentRealm);
  }

  /**
   * 根据指定realm创建Keycloak实例
   */
  private createKeycloakInstance(realm: string): Keycloak {
    this.keycloak = new Keycloak({
      url: this.keycloakBaseUrl,
      realm: realm,
      clientId: realm
    });
    return this.keycloak;
  }

  signIn() {
    const keycloakInstance = this.getOrCreateKeycloakInstance();
    if (!keycloakInstance) {
      console.error('Realm未设置，请先选择Realm');
      return;
    }

    keycloakInstance.init({
      onLoad: 'login-required',
      pkceMethod: 'S256',
      redirectUri: `${window.location.origin}/home`,
    }).catch(err => console.log('登录初始化失败', err));
  }

  signOut() {
    const keycloakInstance = this.getOrCreateKeycloakInstance();
    if (!keycloakInstance) {
      sessionStorage.clear();
      return;
    }

    // 先确保实例已初始化，再执行登出
    keycloakInstance.init({
      onLoad: 'check-sso',
      pkceMethod: 'S256'
    }).then(() => {
      keycloakInstance.logout();
      sessionStorage.clear();
    }).catch(err => {
      console.log('登出初始化失败', err);
      sessionStorage.clear();
    });
  }

  /**
   * 验证用户是否已登录
   * @return Promise<boolean> 登录状态
   */
  async isSignedIn(): Promise<boolean> {
    const keycloakInstance = this.getOrCreateKeycloakInstance();
    if (!keycloakInstance) {
      sessionStorage.clear();
      return false;
    }

    let signedIn = false;
    try {
      signedIn = await keycloakInstance.init({
        onLoad: 'check-sso',
        pkceMethod: 'S256',
        checkLoginIframe: false
      });
    } catch (e) {
      console.log('认证检查失败', e);
      return signedIn;
    }

    if (signedIn) {
      sessionStorage.setItem('jwt', keycloakInstance.token as string);
      sessionStorage.setItem('refresh-token', keycloakInstance.refreshToken as string);
    } else {
      sessionStorage.clear();
    }
    return signedIn;
  }
}

关键优化点说明 #

1. 实例复用与校验：新增getOrCreateKeycloakInstance方法，每次操作前检查现有实例是否匹配当前SessionStorage中的Realm，只有不匹配或不存在时才创建新实例，避免重复初始化。
2. 避免空实例：将keycloak初始化为undefined，取代原来的空实例，减少不必要的资源消耗。
3. 提前初始化：在构造函数中检查SessionStorage是否有保存的Realm，提前创建实例，提升后续操作的响应速度。
4. 错误处理增强：每个方法中先判断实例是否存在，避免因Realm未设置导致的异常。
5. 代码解耦：将实例创建逻辑抽离到单独的createKeycloakInstance方法，便于后续维护和修改配置。

配合组件的使用说明 #

当用户在/signing页面选择Realm并存入SessionStorage后，直接调用securityService.signIn()即可，无需额外处理实例初始化——服务内部会自动创建对应Realm的Keycloak实例并完成登录流程。

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