Angular启动时JWT刷新后用户数据未更新的解决方案咨询

方案一：用BehaviorSubject实现用户状态响应式更新 #

这是最彻底的解决方式，将用户信息转为可观察对象，组件订阅后能自动感知token更新，完全规避时序问题。

修改AuthService #

import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 私有Subject存储用户状态，外部仅能通过Observable订阅
  private userSubject = new BehaviorSubject<User | null>(null);
  public user$: Observable<User | null> = this.userSubject.asObservable();

  constructor(private jwtHelper: JwtHelperService, private http: HttpClient) {
    // 初始化时从localStorage加载现有用户数据
    const token = localStorage.getItem('token');
    if (token) {
      this.userSubject.next(this.jwtHelper.decodeToken(token));
    }
  }

  refreshToken(): Observable<LoginResponse> {
    return this.http.post<LoginResponse>(
      `${environment.apiUrl}/token/refresh`,
      { refresh_token: localStorage.getItem('refresh_token') },
      this.CONTEXT
    ).pipe(
      tap((res: LoginSuccess) => this.storeTokens(res))
    );
  }

  storeTokens(data: LoginSuccess): void {
    localStorage.setItem('token', data.token);
    localStorage.setItem('refresh_token', data.refresh_token);
    // 更新用户状态Subject，触发所有订阅组件更新
    const user = this.jwtHelper.decodeToken(data.token);
    this.userSubject.next(user);
    this.scheduleTokenRefresh(data.token);
  }
}

修改HomeComponent #

export class HomeComponent implements OnInit, OnDestroy {
  user!: User | null;
  private destroy$ = new Subject<void>();

  constructor(private authSvc: AuthService) { }

  ngOnInit() {
    // 订阅用户状态变化，自动获取最新数据
    this.authSvc.user$
      .pipe(takeUntil(this.destroy$))
      .subscribe(user => {
        this.user = user;
      });
  }

  ngOnDestroy() {
    // 清理订阅防止内存泄漏
    this.destroy$.next();
    this.destroy$.complete();
  }
}

方案二：缓存刷新请求，避免重复调用 #

如果担心后续出现重复触发refreshToken的情况，可以在AuthService中添加请求缓存逻辑，确保同一时间仅发起一次刷新请求：

@Injectable({ providedIn: 'root' })
export class AuthService {
  private pendingRefresh$: Observable<LoginResponse> | null = null;

  refreshToken(): Observable<LoginResponse> {
    // 已有正在进行的请求时，直接返回该请求的Observable
    if (this.pendingRefresh$) {
      return this.pendingRefresh$;
    }

    this.pendingRefresh$ = this.http.post<LoginResponse>(
      `${environment.apiUrl}/token/refresh`,
      { refresh_token: localStorage.getItem('refresh_token') },
      this.CONTEXT
    ).pipe(
      tap((res: LoginSuccess) => this.storeTokens(res)),
      finalize(() => {
        // 请求完成后清空缓存标记
        this.pendingRefresh$ = null;
      })
    );

    return this.pendingRefresh$;
  }
}

这个方案可以配合Resolver使用，彻底解决重复请求问题，同时保证组件拿到最新数据。

方案三：用APP_INITIALIZER等待刷新完成再启动应用 #

如果要求应用必须在token刷新完成后才加载页面，可以通过APP_INITIALIZER实现启动阶段的请求阻塞：

在AppModule中配置 #

import { APP_INITIALIZER } from '@angular/core';
import { AuthService } from './auth.service';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

export function initAuth(authSvc: AuthService) {
  return () => authSvc.refreshToken().pipe(
    catchError(error => {
      if (error.status === 401) {
        // 这里可处理未授权跳转，注意需在NgZone中执行导航
      }
      return of(null);
    })
  ).toPromise();
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initAuth,
      deps: [AuthService],
      multi: true
    }
  ]
})
export class AppModule { }

之后可以移除AppComponent中ngOnInit的refreshToken()调用，应用会等待刷新请求完成后再初始化路由，HomeComponent启动时就能拿到最新的用户数据。

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