Angular无需每个组件订阅User Service获取activeUserId调用后端服务的方案

最优实现方案 #

你不能直接把Observable传给要求number类型入参的后端接口，类型不匹配不说，后端调用需要的是实际数值而非可观察对象。正确的实现逻辑如下：

第一步：改造User Service #

• 把原本订阅赋值的逻辑改成用ReplaySubject缓存用户ID，对外暴露只读的Observable，同时封装获取用户ID的工具方法。
• 示例代码：

@Injectable({ providedIn: 'root' })
export class UserService {
  // 用ReplaySubject(1)缓存最近一次发出的用户ID，就算晚订阅也能拿到之前的返回值
  private activeUserIdSubject = new ReplaySubject<number>(1);
  public activeUserId$ = this.activeUserIdSubject.asObservable();

  constructor(private oAuthService: OAuthService) {
    // 订阅认证流，收到ID后塞到Subject里
    this.oAuthService.getUserObservable().subscribe(userId => {
      this.activeUserIdSubject.next(userId);
    })
  }

  // 封装获取用户ID的方法，保证永远返回有值的Observable
  getActiveUserId(): Observable<number> {
    return this.activeUserId$.pipe(first(id => !!id)); // 过滤掉空值，只取第一个有效值
  }
}

第二步：改造后端服务封装层 #

• 不用在组件里订阅User Service，直接在后端服务的封装层里依赖User Service，每次调用接口前先拿用户ID，再发请求。
• 示例代码：

@Injectable({ providedIn: 'root' })
export class BackendServices {
  constructor(private http: HttpClient, private userService: UserService) {}

  // 举个例子，原本需要传userId的接口
  getSomeData(): Observable<ResponseType> {
    return this.userService.getActiveUserId().pipe(
      // 拿到用户ID后再发起实际的http请求
      switchMap(userId => this.http.get<ResponseType>('/your/api/path', { params: { userId } }))
    )
  }
}

第三步：组件直接调用即可 #

• 组件里的onClick方法不需要处理任何用户ID相关的逻辑，直接调用后端服务的方法就行：

@Component({ /* 组件配置 */ })
export class YourComponent {
  constructor(private backendServices: BackendServices) {}

  onClick() {
    this.backendServices.getSomeData().subscribe(res => {
      // 处理返回结果
    })
  }
}

方案优势 #

• 不需要每个组件都订阅User Service，所有用户ID的处理逻辑都收敛在User Service和后端服务层，组件完全不需要感知
• 即使用户在认证返回前点击，getActiveUserId()方法会等有效用户ID返回后才触发后续的http请求，100ms的延迟完全可以覆盖，不会出现传空值的问题
• 类型安全，完全符合后端接口要求number类型入参的规则

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