Metronic7 Angular版auth.service的getUserByToken重复调用问题

这个现象绝大多数情况不是Metronic7的原生Bug，是Angular生态下常见的订阅逻辑、变更检测和框架默认初始化逻辑冲突导致的，可参考以下内容排查：

常见触发原因 #

• 双重订阅问题：Metronic7默认的Auth权限守卫、root全局注入的AuthService、Header/Sidebar等全局布局组件都会默认订阅用户状态，如果两处及以上位置同时调用getUserByToken且没有做请求去重，就会触发两次完全相同的POST请求。如果业务组件内手动订阅了用户状态可观察对象没有及时销毁，路由切换时重复初始化也会叠加调用请求。
• Angular开发模式双重变更检测：Angular在开发环境（environment.production = false）下默认会执行两次变更检测来校验状态一致性，如果getUserByToken方法没有做幂等处理，直接在模板的异步管道| async中调用，或是在ngOnInit调用时没有加用户信息判空逻辑，就会被变更检测触发两次。
• Metronic默认路由守卫逻辑冲突：Metronic7自带的AuthGuard会在路由跳转前调用一次getUserByToken校验登录状态和权限，同时AppComponent初始化时又会默认调用一次拉取用户信息渲染全局布局，两个逻辑没有做缓存复用的情况下就会出现重复请求。

修复方案 #

• 给getUserByToken添加请求缓存和去重逻辑：在auth.service.ts中新增私有变量缓存已拉取的用户信息和进行中的请求，调用时优先返回缓存结果，示例代码如下：

// auth.service.ts 新增逻辑
private cachedUser: User | null = null;
private pendingRequest: Observable<User> | null = null;

getUserByToken(): Observable<User> {
  // 已有用户缓存直接返回
  if (this.cachedUser) {
    return of(this.cachedUser);
  }
  // 已有正在进行的请求直接返回可观察对象，避免重复发请求
  if (this.pendingRequest) {
    return this.pendingRequest;
  }
  // 发起新请求
  this.pendingRequest = this.http.post<User>('你的用户详情接口地址', {
    // 你的请求参数
  }).pipe(
    tap(user => this.cachedUser = user),
    finalize(() => this.pendingRequest = null),
    shareReplay(1)
  );
  return this.pendingRequest;
}

• 清理冗余订阅：所有手动订阅getUserByToken的业务组件都需要在ngOnDestroy生命周期中取消订阅，或是直接使用模板异步管道| async自动管理订阅生命周期，避免内存泄漏和重复订阅。
• 生产环境验证：Angular生产环境会关闭双重变更检测，如果仅开发环境出现两次请求、生产环境请求正常，属于Angular开发模式的正常特性，无需额外处理。
• 统一用户信息拉取入口：删除AppComponent等全局组件中重复的getUserByToken调用，统一仅在AuthGuard中拉取一次用户信息存储到AuthService，全局组件直接读取服务内的缓存即可。

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