Angular集成Keycloak遇window未定义问题求助

问题原因 #

你在初始化Keycloak时直接使用window.location.origin配置silentCheckSsoRedirectUri出现window undefined错误，大概率是因为：

• 项目启用了Angular Universal（服务端渲染SSR），服务端环境中不存在window对象；
• 即使未启用SSR，Angular初始化阶段（APP_INITIALIZER执行时）window可能还未被TypeScript识别，或项目strict模式对全局对象访问有严格限制。

而你参照的教程能正常运行，通常是因为教程未启用SSR，且完全在浏览器环境运行，window对象可直接访问。

解决方案 #

方案1：区分浏览器/服务端环境（适用于SSR项目） #

通过isPlatformBrowser判断当前环境，仅在浏览器端使用window：

1. 导入所需依赖：

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

2. 修改初始化函数：

function initializeKeycloak(keycloak: KeycloakService, @Inject(PLATFORM_ID) platformId: object) {
  return () => {
    // 仅在浏览器环境下生成重定向地址
    const silentRedirectUri = isPlatformBrowser(platformId) 
      ? window.location.origin + '/assets/silent-check-sso.html'
      : ''; // 服务端无需配置该参数

    return keycloak.init({
      config: {
        url: 'http://localhost:8080',
        realm: 'zetta',
        clientId: 'zetta-client'
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri: silentRedirectUri
      }
    });
  };
}

3. 更新APP_INITIALIZER的依赖：

providers: [
  provideClientHydration(),
  {
    provide: APP_INITIALIZER,
    useFactory: initializeKeycloak,
    multi: true,
    deps: [KeycloakService, PLATFORM_ID] // 新增PLATFORM_ID依赖
  }
],

方案2：使用DOCUMENT注入替代window（非SSR项目推荐） #

通过Angular的DOCUMENT令牌获取文档对象，避免直接访问全局window：

1. 导入DOCUMENT：

import { DOCUMENT, Inject } from '@angular/core';

2. 修改初始化函数：

function initializeKeycloak(keycloak: KeycloakService, @Inject(DOCUMENT) document: Document) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8080',
        realm: 'zetta',
        clientId: 'zetta-client'
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          document.location.origin + '/assets/silent-check-sso.html'
      }
    });
}

3. 更新依赖：

providers: [
  provideClientHydration(),
  {
    provide: APP_INITIALIZER,
    useFactory: initializeKeycloak,
    multi: true,
    deps: [KeycloakService, DOCUMENT] // 新增DOCUMENT依赖
  }
],

方案3：临时硬编码地址（仅测试用） #

如果只是临时验证功能，可以直接写死地址：

silentCheckSsoRedirectUri: 'http://localhost:4200/assets/silent-check-sso.html'

注意：正式环境不推荐，无法适配不同部署域名。

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