OIDC客户端对接IdentityServer4，刷新页面丢数据及API调用异常求助

看起来你遇到的是SPA页面刷新后OIDC认证状态初始化滞后，导致API请求先发了一次无授权头的请求，等用户信息加载完成后又发了一次带正确头的请求。这种情况在单页应用里很常见，核心问题是页面刷新时认证状态的异步初始化和API请求的时机不匹配。下面是针对性的解决方案：

1. 改造AuthService：确保会话持久化+状态可监听 #

首先要让auth.service.ts在页面刷新时，能从本地存储里恢复已有的认证会话，同时对外暴露一个可观察的认证状态，让API服务能等待状态就绪后再发起请求。

示例改造代码：

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

@Injectable({ providedIn: 'root' })
export class AuthService {
  private userSubject = new BehaviorSubject<User | null>(null);
  public user$: Observable<User | null> = this.userSubject.asObservable();
  private userManager: UserManager;

  constructor() {
    const oidcConfig = {
      authority: 'https://your-identityserver-domain',
      client_id: 'your-client-id',
      redirect_uri: `${window.location.origin}/callback`,
      response_type: 'code',
      scope: 'openid profile your-api-scope',
      post_logout_redirect_uri: window.location.origin,
      // 关键：启用localStorage保存会话，刷新页面时能直接恢复
      storage: localStorage,
      // 自动加载用户信息，避免手动触发
      loadUserInfo: true
    };
    this.userManager = new UserManager(oidcConfig);

    // 页面初始化时立即尝试恢复已登录用户
    this.initAuthState();
  }

  private async initAuthState() {
    try {
      const user = await this.userManager.getUser();
      if (user && !user.expired) {
        this.userSubject.next(user);
      } else {
        this.userSubject.next(null);
      }
    } catch (err) {
      console.error('初始化认证状态失败:', err);
      this.userSubject.next(null);
    }
  }

  // 获取有效Access Token的异步方法
  public async getValidAccessToken(): Promise<string | null> {
    const user = await this.userManager.getUser();
    return user && !user.expired ? user.access_token : null;
  }

  // 登录、登出等其他方法保持不变...
}

2. 改造ApiService：等待认证状态就绪再发请求 #

你的api.service.ts目前应该是直接发起请求，没有等待AuthService的用户状态加载完成。我们需要让所有API请求先等待拿到有效token后，再添加授权头发送。

示例改造代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from './auth.service';
import { firstValueFrom } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient, private authService: AuthService) {}

  // 封装获取授权头的异步方法
  private async getAuthHeaders(): Promise<HttpHeaders> {
    const token = await this.authService.getValidAccessToken();
    let headers = new HttpHeaders();
    if (token) {
      headers = headers.set('Authorization', `Bearer ${token}`);
    }
    return headers;
  }

  // 改造GET请求，确保等待授权头就绪
  public async get<T>(url: string): Promise<T> {
    const headers = await this.getAuthHeaders();
    return firstValueFrom(this.http.get<T>(url, { headers }));
  }

  // 同理封装POST/PUT/DELETE等请求方法...
}

3. 排查额外的请求重复触发点 #

如果改造后还是有两次请求，可能是以下原因：

• 组件请求重复触发：检查组件代码，是否在ngOnInit和模板中都调用了API方法，导致重复请求。
• 路由守卫未等待认证状态：如果路由守卫没有等认证状态就绪就放行，会导致组件提前发起请求，之后认证状态更新又触发一次请求。可以给路由守卫添加等待逻辑：

// 路由守卫示例
async canActivate(): Promise<boolean> {
  const user = await this.authService.userManager.getUser();
  if (user && !user.expired) {
    return true;
  } else {
    await this.authService.login(window.location.pathname);
    return false;
  }
}

• OIDC静默刷新：如果配置了silent_redirect_uri，OIDC客户端会自动发起静默刷新请求，这是正常的机制，不会影响业务请求，可以忽略。

关键总结 #

• 确保页面刷新时，AuthService优先从本地存储恢复会话，而不是等待用户操作。
• 所有API请求必须等待认证状态就绪后再发送，避免无授权头的无效请求。
• 检查OIDC配置，启用storage和loadUserInfo保障会话持久化。

这样改造后，页面刷新时会先恢复用户状态，API请求只会发送一次带正确授权头的请求，用户数据也不会丢失了。

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