Angular路由守卫中Amplify AuthenticatorService状态始终为configuring问题

我希望使用路由守卫保护Angular应用的部分路由，路由结构如下：

export const ROUTES: Routes = [
  {
    path: '',
    component: FirmSignup2Component,
    children: [
      {
        path: 'user-or-admin',
        component: UserOrAdminComponent,
        children: [
          {
            path: 'user',
            component: UserComponent,
          },
          {
            path: 'admin',
            component: AdminComponent,
          },
        ],
      },
      {
        path: 'secure',
        component: SecureComponent,
        canActivate: [
          () => {
            console.log(inject(AuthenticatorService).authStatus);
            return inject(AuthenticatorService).authStatus === 'authenticated';
          },
        ],
        children: [
          {
            path: 'page1',
            component: Page1Component,
          },
          {
            path: 'page2',
            component: Page2Component,
          },
        ],
      },
    ],
  },
]

其中/secure及其子路由需通过user或admin组件完成认证。我不想在每个登录组件下复制完整的secure路由子树，因此将登录路由单独拆分，而非用<amplify-authenticator />组件包裹/secure路由。

但在canActivate中判断authStatus时，其值始终为configuring，而视图加载完成后会变为authenticated。请问这是什么原因？如何在Angular中结合Amplify Authenticator使用路由守卫？

Amplify的AuthenticatorService初始化阶段，authStatus默认处于configuring状态——它需要时间检查本地存储的认证会话、与后端同步用户状态。而路由守卫的canActivate是同步执行的，此时Amplify还未完成初始化流程，所以拿到的是初始的configuring状态，而非最终的认证结果。

1. 创建专用路由守卫服务 #

不要在路由配置中写内联函数，单独创建守卫服务，利用RxJS的Observable监听authStatus变化，直到状态稳定：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthenticatorService } from '@aws-amplify/ui-angular';
import { filter, map, take } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    private authService: AuthenticatorService,
    private router: Router
  ) {}

  canActivate() {
    return this.authService.authStatus$.pipe(
      // 过滤未完成初始化的configuring状态
      filter(status => status !== 'configuring'),
      // 只取一次稳定状态，避免持续监听
      take(1),
      map(status => {
        if (status === 'authenticated') {
          return true;
        }
        // 未认证时跳转到登录路由
        this.router.navigate(['/user-or-admin/user']);
        return false;
      })
    );
  }
}

2. 修改路由配置使用守卫服务 #

将原内联canActivate替换为创建好的AuthGuard：

export const ROUTES: Routes = [
  {
    path: '',
    component: FirmSignup2Component,
    children: [
      {
        path: 'user-or-admin',
        component: UserOrAdminComponent,
        children: [
          {
            path: 'user',
            component: UserComponent,
          },
          {
            path: 'admin',
            component: AdminComponent,
          },
        ],
      },
      {
        path: 'secure',
        component: SecureComponent,
        canActivate: [AuthGuard], // 替换为守卫服务
        children: [
          {
            path: 'page1',
            component: Page1Component,
          },
          {
            path: 'page2',
            component: Page2Component,
          },
        ],
      },
    ],
  },
]

3. 确保Amplify提前初始化 #

在main.ts中先完成Amplify配置初始化，再启动Angular应用：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { Amplify } from 'aws-amplify';
import amplifyconfig from './amplifyconfiguration.json';

// 优先初始化Amplify
Amplify.configure(amplifyconfig);

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

补充说明 #

• 必须使用authStatus$（Observable类型）而非同步属性authStatus，才能监听状态变化；
• filter跳过configuring状态，保证只处理稳定的认证结果；take(1)避免持续监听导致内存泄漏；
• 若需区分user/admin角色，可在守卫中通过authService.user$获取用户信息，进一步判断角色权限。

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