Angular SSR（Universal）集成keycloak-js与keycloak-angular插件遇窗口问题求助

核心思路 #

Angular SSR在服务端渲染阶段不存在浏览器的window、document等对象，而Keycloak默认初始化逻辑会依赖这些浏览器环境API，所以核心解决方向是仅在客户端环境执行Keycloak初始化，服务端直接跳过相关逻辑，同时封装安全的环境判断工具。

具体实现步骤 #

1. 封装浏览器环境检测服务 #

创建platform.service.ts，统一处理环境判断：

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

@Injectable({ providedIn: 'root' })
export class PlatformService {
  constructor(@Inject(PLATFORM_ID) private platformId: object) {}

  isBrowser(): boolean {
    return isPlatformBrowser(this.platformId);
  }
}

2. 修改Keycloak初始化逻辑 #

在你的Keycloak封装服务（比如app-keycloak.service.ts）中，注入PlatformService，仅在浏览器环境下初始化：

import { Injectable } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';
import { PlatformService } from './platform.service';

@Injectable({ providedIn: 'root' })
export class AppKeycloakService {
  constructor(
    private keycloakService: KeycloakService,
    private platformService: PlatformService
  ) {}

  async initKeycloak() {
    if (this.platformService.isBrowser()) {
      try {
        await this.keycloakService.init({
          config: {
            url: '你的Keycloak服务地址',
            realm: '你的Realm名称',
            clientId: '你的客户端ID'
          },
          initOptions: {
            onLoad: 'login-required', // 根据业务需求调整
            checkLoginIframe: false // 关闭iframe检查，避免服务端报错
          }
        });
      } catch (error) {
        console.error('Keycloak初始化失败:', error);
      }
    }
  }
}

3. 调整初始化触发时机 #

不要在AppModule的providers中直接触发Keycloak初始化，而是移到AppComponent的ngOnInit中，确保仅在客户端执行：

import { Component, OnInit } from '@angular/core';
import { AppKeycloakService } from './app-keycloak.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private appKeycloakService: AppKeycloakService) {}

  ngOnInit(): void {
    this.appKeycloakService.initKeycloak();
  }
}

4. 路由守卫的兼容处理 #

如果使用Keycloak的路由守卫，也要在守卫逻辑中先判断浏览器环境，避免服务端执行时出错：

import { CanActivate } from '@angular/router';
import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';
import { PlatformService } from './platform.service';

export class AuthGuard extends KeycloakAuthGuard implements CanActivate {
  constructor(
    protected override keycloakAngular: KeycloakService,
    private platformService: PlatformService
  ) {
    super(keycloakAngular);
  }

  async isAccessAllowed() {
    if (!this.platformService.isBrowser()) {
      return true; // 服务端直接放行，客户端再做权限校验
    }

    // 你的权限校验逻辑
    return this.authenticated;
  }
}

额外注意事项 #

• 服务端渲染阶段不要依赖Keycloak的token、用户信息等数据，这些仅能在客户端获取
• 若使用keycloak-angular库，确保AppServerModule中不会引入依赖浏览器环境的Keycloak相关模块

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