oidc-client-js回调后无状态问题：Angular 5.2.8及以上版本异常求助

首先，这个回调后丢失状态的问题大概率和Angular 5.2.8开始的路由策略变化或者Zone.js的更新有关——Angular在5.2.8调整了部分路由初始化逻辑，导致oidc-client-js的回调页面无法正确捕获OIDC的状态参数，或者状态没有被同步到Angular的应用上下文里。

下面是针对Angular 5.2.8及以上版本适配oidc-client-js的完整示例项目结构和核心代码：

1. 项目基础配置 #

• 核心依赖：oidc-client@1.11.5（这个版本对Angular 5/6兼容性较好）、@angular/core@5.2.8/6.x
• 关键文件：
  • src/app/auth/auth.service.ts：封装OIDC认证逻辑
  • src/app/auth/callback/callback.component.ts：处理认证回调
  • src/app/app-routing.module.ts：配置路由（包括回调路由）
  • src/main.ts：确保OIDC回调在Angular初始化前处理状态

2. 核心代码实现 #

认证服务（auth.service.ts） #

import { Injectable } from '@angular/core';
import { UserManager, User, WebStorageStateStore } from 'oidc-client';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private userManager: UserManager;
  private user: User | null = null;

  constructor() {
    // 针对Angular 5.2.8+配置：使用localStorage存储状态，避免sessionStorage的上下文问题
    const settings = {
      authority: '你的OIDC授权服务器地址',
      client_id: '你的客户端ID',
      redirect_uri: `${window.location.origin}/callback`,
      post_logout_redirect_uri: `${window.location.origin}/`,
      response_type: 'code',
      scope: 'openid profile email',
      userStore: new WebStorageStateStore({ store: window.localStorage }),
      // 关键：关闭自动静默刷新，避免Angular初始化时的冲突
      automaticSilentRenew: false,
    };

    this.userManager = new UserManager(settings);

    // 监听用户状态变化，同步到Angular上下文
    this.userManager.getUser().then(user => {
      this.user = user;
    });

    this.userManager.events.addUserLoaded(user => {
      this.user = user;
    });
  }

  login(): Promise<void> {
    return this.userManager.signinRedirect();
  }

  logout(): Promise<void> {
    return this.userManager.signoutRedirect();
  }

  handleCallback(): Promise<User | null> {
    // 处理回调时强制触发Angular变更检测
    return this.userManager.signinRedirectCallback().then(user => {
      this.user = user;
      return user;
    });
  }

  isAuthenticated(): boolean {
    return this.user && !this.user.expired;
  }
}

回调组件（callback.component.ts） #

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../auth.service';

@Component({
  template: `<div>正在处理认证...</div>`
})
export class CallbackComponent implements OnInit {
  constructor(
    private authService: AuthService,
    private router: Router,
    private cdRef: ChangeDetectorRef // 关键：手动触发变更检测
  ) {}

  ngOnInit(): void {
    this.authService.handleCallback().then(() => {
      // 回调处理完成后跳转到首页或目标页面
      this.router.navigate(['/']);
      // 手动触发变更检测，确保Angular更新视图
      this.cdRef.detectChanges();
    }).catch(error => {
      console.error('认证回调失败:', error);
      this.router.navigate(['/login']);
      this.cdRef.detectChanges();
    });
  }
}

路由配置（app-routing.module.ts） #

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CallbackComponent } from './auth/callback/callback.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  // 回调路由必须配置成无守卫的公开路由
  { path: 'callback', component: CallbackComponent },
  // 其他路由...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

主入口文件（main.ts） #

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// 关键：在Angular初始化前，先检查是否是OIDC回调请求，提前处理状态
if (window.location.pathname === '/callback') {
  // 这里不需要做额外逻辑，只要确保路由能加载到CallbackComponent即可
  // 避免Angular初始化时忽略URL中的状态参数
}

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

3. 关键注意点（针对Angular 5.2.8+/6.x） #

• 避免使用sessionStorage存储状态：Angular 5.2.8开始对sessionStorage的访问时机有变化，改用localStorage更稳定
• 手动触发变更检测：回调页面处理完状态后，必须调用ChangeDetectorRef.detectChanges()，否则Angular可能不会更新视图或路由状态
• 关闭自动静默刷新：在初始化UserManager时关闭automaticSilentRenew，避免和Angular的生命周期冲突，后续可以手动在组件中实现静默刷新逻辑
• 回调路由必须公开：不能给callback路由添加认证守卫，否则会导致状态还没处理就被重定向

4. 完整示例项目结构参考 #

src/
├── app/
│   ├── auth/
│   │   ├── auth.service.ts
│   │   └── callback/
│   │       └── callback.component.ts
│   ├── home/
│   │   └── home.component.ts
│   ├── app-routing.module.ts
│   ├── app.module.ts
│   └── app.component.ts
├── environments/
│   ├── environment.ts
│   └── environment.prod.ts
└── main.ts

这个示例已经针对Angular 5.2.8和6.x版本做了适配，解决了回调后无状态的问题，你可以直接基于这个结构调整你的OIDC服务器配置即可。

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