ng-alain框架中Token登录后应用信息加载问题的分析与解决方案

问题背景

在ng-alain框架中，当用户通过Token登录成功后，系统需要重新加载应用信息以获取用户相关数据。然而，在现有实现中，由于Observable的缓存特性，导致登录后再次调用startup服务的load方法时，无法将新获取的Token正确加载到HTTP请求头中。

技术分析

ng-alain框架默认使用以下方式发起应用数据请求：

private appData$ = this.httpClient.get('api')

这种实现方式存在一个关键问题：Observable对象在首次创建后会被缓存。当用户完成登录操作并获得新的Token后，再次调用load方法时，由于Observable已经被缓存，HTTP请求不会重新创建，导致新的Token无法被添加到请求头中。

解决方案

为了解决这个问题，我们需要将静态的Observable属性改为动态的方法调用。具体修改如下：

1. 原始实现（存在问题）：

private appData$ = this.httpClient.get('./assets/tmp/app-data.json').pipe(
  catchError((res: NzSafeAny) => {
    console.warn(`StartupService.load: Network request failed`, res);
    setTimeout(() => this.router.navigateByUrl(`/exception/500`));
    return of({});
  })
);

2. 改进后的实现：

private getAppData(): Observable<any> {
  return this.httpClient.get('./assets/tmp/app-data.json', {
    context: new HttpContext().set(ALLOW_ANONYMOUS, this.tokenService.get()?.token ? false : true)
  }).pipe(
    catchError((res: NzSafeAny) => {
      console.warn(`StartupService.load: Network request failed`, res);
      setTimeout(() => this.router.navigateByUrl(`/exception/500`));
      return of({});
    })
  );
}

改进点解析

1. 从属性到方法的转变：将静态的appData$属性改为getAppData()方法，确保每次调用都能创建新的Observable对象。

2. 动态Token处理：通过检查tokenService中是否存在Token，动态设置ALLOW_ANONYMOUS标志，确保登录后的请求能够携带正确的认证信息。

3. 请求隔离：每次调用getAppData()都会创建新的HTTP请求，避免了Observable缓存导致的Token不更新问题。

实现原理

这种改进利用了Angular的HttpClient和RxJS的特性：

1. 每次调用getAppData()方法都会创建一个新的HTTP请求Observable
2. 通过HttpContext动态设置请求上下文，根据当前Token状态决定是否允许匿名访问
3. 保留了原有的错误处理逻辑，确保系统健壮性

最佳实践建议

1. 对于需要认证的API请求，建议都采用这种动态方法的方式，而不是静态Observable属性

2. 考虑请求拦截器：对于全局的认证需求，可以结合HTTP拦截器统一处理Token注入

3. 缓存策略：如果确实需要缓存某些数据，应该显式地实现缓存逻辑，而不是依赖Observable的隐式缓存

总结

在ng-alain框架中处理认证后的数据加载时，需要注意Observable的缓存特性可能导致的问题。通过将静态Observable属性改为动态方法调用，可以确保每次请求都能携带最新的认证信息。这种模式不仅适用于应用启动时的数据加载，也可以推广到其他需要动态认证的场景中。