如何在Angular中使用Amplify Authenticator组件实现未认证路由

可行，你可以通过以下步骤解决路由加载Authenticator组件时的错误，并实现按需触发登录的需求：

• 确保Amplify上下文正确注入
  路由加载子组件时出现的Cannot destructure property 'country_code'...错误，核心原因是Amplify的Actor上下文未在路由组件层级正确初始化。需要：

  • 在项目main.ts中确认Amplify初始化代码执行无误：

    import { Amplify } from 'aws-amplify';
    import awsconfig from './aws-exports';
    
    Amplify.configure(awsconfig);
    

  • 若登录组件属于独立子模块，需在该子模块中同样导入AmplifyAuthenticatorModule，而非仅在AppModule中导入。

• 正确在路由组件内使用Authenticator
  创建独立的LoginComponent，在其模板内挂载Authenticator，而非直接将Authenticator设为路由组件：

  <amplify-authenticator>
    <ng-template amplifySlot="authenticated" let-user="user">
      <!-- 登录后可跳转至目标页面，或展示内容 -->
      <button (click)="signOut()">退出登录</button>
    </ng-template>
  </amplify-authenticator>
  

  组件类逻辑示例：

  import { Component } from '@angular/core';
  import { AuthService } from '@aws-amplify/ui-angular';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html'
  })
  export class LoginComponent {
    constructor(private authService: AuthService) {}
  
    signOut() {
      this.authService.signOut();
    }
  }
  

• 配置路由规则
  在app-routing.module.ts中区分无需认证的路由和登录路由：

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { LoginComponent } from './login/login.component';
  import { HomeComponent } from './home/home.component';
  import { AuthGuard } from './auth.guard'; // 可选：用于保护需要认证的路由
  
  const routes: Routes = [
    { path: '', component: HomeComponent }, // 无需认证的首页
    { path: 'login', component: LoginComponent }, // 仅访问此路由时加载登录组件
    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }, // 需要认证的路由，通过守卫跳转至登录页
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

• 修复上下文缺失问题
  若仍出现上下文错误，可尝试在AppComponent模板中添加空的Amplify上下文容器，确保所有路由组件都处于Amplify上下文范围内；同时检查Amplify UI Angular版本，部分新版本要求在路由所在模块中显式导入AmplifyAuthenticatorModule。

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