Angular集成Keycloak：Session Storage存值及用户名获取报错问题

一、Session Storage存储可行性 #

完全可以将access token和username存在Session Storage中：

• Session Storage的特性是仅在当前会话（标签页）有效，关闭标签页或浏览器时会自动清除，刚好匹配你登出时自动清除的需求。
• 主动登出时，还可以手动调用sessionStorage.removeItem('access_token')和sessionStorage.removeItem('username')做额外清理。

二、构造函数调用getUsername()报错的原因与解决 #

你遇到的Error: User not logged in or user profile was not loaded是因为：

• 构造函数执行时，Keycloak可能还未完成初始化，或者用户登录流程还没走完，此时调用getUsername()自然拿不到数据。

解决方法：把获取用户名的逻辑移到ngOnInit生命周期钩子中，先确认登录状态再获取用户信息，示例代码如下：

import { Component, OnInit } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
  username: string = '';

  constructor(private keycloakService: KeycloakService) { }

  async ngOnInit(): Promise<void> {
    // 先确认用户已登录
    const isLoggedIn = await this.keycloakService.isLoggedIn();
    if (isLoggedIn) {
      // 方式1：直接获取用户名
      this.username = await this.keycloakService.getUsername();
      // 存储到Session Storage
      sessionStorage.setItem('username', this.username);

      // 同时获取access token并存储
      const accessToken = await this.keycloakService.getToken();
      sessionStorage.setItem('access_token', accessToken);
    }
  }
}

三、从Session Storage读取并展示用户名 #

读取展示非常简单，直接从Session Storage获取后绑定到模板即可：

1. 在组件中读取：

// 比如在组件初始化或需要的地方读取
this.username = sessionStorage.getItem('username') || '未登录';

2. 在模板中展示：

<p>当前登录用户：{{ username }}</p>

四、登出时的清理逻辑 #

在登出方法中，除了调用Keycloak的登出接口，还可以主动清除Session Storage中的数据：

async logout(): Promise<void> {
  await this.keycloakService.logout();
  // 手动清除Session Storage中的项
  sessionStorage.removeItem('access_token');
  sessionStorage.removeItem('username');
}

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