Angular中oidc-client-ts代码未执行及Token获取问题咨询

一、switchMap内代码不执行的原因及修复 #

核心原因 #

1. Observable未订阅：RxJS的Observable属于「冷Observable」，只有调用.subscribe()方法后，整个流才会被触发执行。你在ngOnInit里仅构建了Observable流，但没有执行订阅操作，导致switchMap内的代码完全不会运行。
2. 操作符使用错误：switchMap的作用是将当前Observable切换为另一个Observable流，但你返回的this.claims是普通对象，不符合switchMap的输入要求。此处你只是想处理获取到的user数据、更新组件状态，应该用tap操作符（专门处理副作用，不改变原流的内容）而非switchMap。

修复后的代码 #

ngOnInit() {
  console.log('LoginComponent.ngOnInit');
  this.auth.getUser().pipe(
    tap(user => {
      console.log('现在这段代码会执行了');
      this.isLoggedIn = !!user;
      if (user && user.id_token) {
        this.claims = jwt_decode(user.id_token);
        console.log(JSON.stringify(this.claims));
      } else {
        console.log('user is null');
      }
    })
  ).subscribe(); // 必须调用subscribe触发流执行
}

二、通过oidc-client-ts获取Token的方法 #

1. 获取已存储的Token #

通过userManager.getUser()获取User对象，该对象包含三类核心Token：

• id_token：ID Token，存储用户身份声明信息
• access_token：访问Token，用于调用受保护的API接口
• refresh_token：刷新Token，用于在access_token过期时静默获取新的访问凭证

示例代码：

this.auth.getUser().subscribe(user => {
  if (user) {
    const idToken = user.id_token;
    const accessToken = user.access_token;
    const refreshToken = user.refresh_token;
    // 根据业务场景使用对应Token
  }
});

2. 登录回调后获取Token #

用户通过signinRedirect()跳转到认证服务器完成登录后，会重定向到你配置的redirect_uri页面（如signin-callback组件），此时需调用signinRedirectCallback()完成登录流程并获取Token：

// 在signin-callback组件中
this.auth.userManager.signinRedirectCallback().then(user => {
  // user对象包含完整的Token信息
  console.log('登录成功，访问Token:', user.access_token);
  // 跳转到首页或目标页面
}).catch(err => {
  console.error('登录回调失败:', err);
});

3. 静默刷新Token #

当access_token过期时，可通过signinSilent()方法在无感知的情况下刷新获取新Token：

this.auth.renewToken().subscribe(user => {
  if (user) {
    const newAccessToken = user.access_token;
    // 更新本地存储的Token或状态
  }
});

4. 监听Token状态变化 #

通过userManager的事件监听Token的生命周期变化，比如Token过期、用户登录状态变更等：

// 监听用户加载完成事件
this.auth.userManager.events.addUserLoaded(user => {
  console.log('用户登录状态更新，当前访问Token:', user.access_token);
});

// 监听Token过期事件
this.auth.userManager.events.addTokenExpired(() => {
  console.log('Token已过期，自动刷新');
  this.auth.renewToken().subscribe();
});

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