Angular中如何确保AWS Cognito用户属性Promise在组件使用前返回

嘿，这个问题我之前在Angular项目里也碰到过！要确保登录后获取用户属性的Promise在组件需要数据前就完成，有几个非常实用的方案，我给你详细拆解下：

这是最贴合Angular最佳实践的方式，路由解析器会在路由激活之前完成异步数据获取，等数据完全就绪后才会加载对应的组件。

步骤： #

1. 创建解析器类，实现Resolve接口：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { UserService } from './user.service'; // 你的用户属性服务

@Injectable({ providedIn: 'root' })
export class UserAttributesResolver implements Resolve<any> {
  constructor(private userService: UserService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    // 调用你获取AWS Cognito用户属性的Promise方法
    return this.userService.getUserAttributes();
  }
}

2. 在路由配置中关联这个解析器：

const routes: Routes = [
  {
    path: 'user-profile', // 你的目标组件路由
    component: UserProfileComponent,
    resolve: {
      userAttributes: UserAttributesResolver
    }
  }
];

3. 在组件中直接获取预加载好的数据：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({...})
export class UserProfileComponent implements OnInit {
  userAttributes: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 这里拿到的是已经解析完成的数据，无需等待Promise
    this.userAttributes = this.route.snapshot.data['userAttributes'];
  }
}

如果你的场景是需要在用户登录后立刻获取属性，且确保所有受保护路由进入前数据都已就绪，可以用CanActivate守卫：

步骤： #

1. 创建守卫类，在canActivate中等待Promise完成：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { UserService } from './user.service';

@Injectable({ providedIn: 'root' })
export class UserDataGuard implements CanActivate {
  constructor(private userService: UserService, private router: Router) {}

  async canActivate(): Promise<boolean> {
    try {
      // 等待用户属性获取完成
      await this.userService.getUserAttributes();
      return true;
    } catch (error) {
      // 处理获取失败的情况，比如跳回登录页
      this.router.navigate(['/login']);
      return false;
    }
  }
}

2. 给受保护路由添加该守卫：

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [UserDataGuard]
  }
];

注意：记得在你的用户服务里缓存获取到的属性，后续组件直接从服务读取缓存即可，不用重复调用Cognito接口。

如果不想修改路由配置，也可以把Promise转换成Observable，用Angular的async管道自动等待数据就绪：

步骤： #

1. 改造服务方法，返回Observable：

import { from } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class UserService {
  // 原Promise方法
  private async getUserAttributes(): Promise<any> {
    return await yourCognitoAttributeFetchLogic();
  }

  // 转换成Observable供组件使用
  getUserAttributes$() {
    return from(this.getUserAttributes());
  }
}

2. 组件中定义Observable属性：

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({...})
export class UserProfileComponent {
  userAttributes$ = this.userService.getUserAttributes$();
}

3. 模板中用async管道渲染：

<div *ngIf="userAttributes$ | async as userAttrs">
  <!-- 仅当数据就绪后才会渲染这部分内容 -->
  <p>用户名：{{ userAttrs.username }}</p>
  <p>邮箱：{{ userAttrs.email }}</p>
</div>

不管用哪种方案，都建议在服务里缓存已获取的用户属性，减少重复API调用：

@Injectable({ providedIn: 'root' })
export class UserService {
  private cachedUserAttributes: any;

  async getUserAttributes(): Promise<any> {
    if (this.cachedUserAttributes) {
      return this.cachedUserAttributes;
    }
    const attrs = await yourCognitoAttributeFetchLogic();
    this.cachedUserAttributes = attrs;
    return attrs;
  }

  // 用户登出时清空缓存
  clearUserCache() {
    this.cachedUserAttributes = null;
  }
}

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