Question

我在尝试使用AWS Amplify进行登录时遇到麻烦。它具有多因素身份验证，当MFA成功执行时，我正在尝试通过router.navigate（）将应用程序路由到另一个路由/组件。

执行此操作时，构造函数无法运行。这是我通过依赖注入订阅Amplify authState的地方。它订阅authState并引入用户信息。最初的成功和通过router.navigate（）进行路由时，它不起作用。如果刷新页面，一切正常，因为它调用了构造函数。

我尝试使用ngZone.run（），但这对我也不起作用。这是我的代码。

用于登录的多因素身份验证检查-登录组件

submitMFA() {
    console.log(this.mfaCode);
    if (this.mfaType == 'SMS_MFA') {
      Auth.confirmSignIn(this.user,this.mfaCode, 'SMS_MFA')
        .then(user => {
          this.loginSuccess();
        })
        .catch(err => {
          this.loginError(err);
        });
    } else {
      Auth.confirmSignIn(this.user,this.mfaCode, 'SOFTWARE_TOKEN_MFA')
        .then(user => {
          this.loginSuccess();
        })
        .catch(err => {
          this.loginError(err);
        });
    }
  }

  loginSuccess() {
    console.log("Success");
    console.log(this.user);
    this.resetMFA();
    this.router.navigate(['/home']);
  }

我要导航到的Home组件：

import { Component, OnInit, NgZone } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';
import { Auth } from 'aws-amplify';
var QRCode = require('qrcode');

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  userGroup: string = "none";
  user: any = null
  preferredMFA: string = null;
  totpSetup: boolean = false

  constructor(private amplifyService: AmplifyService, private ngZone: NgZone) {

    this.amplifyService.authStateChange$
      .subscribe(authState => {
        if (authState.state === 'signedIn') {
          this.user = authState.user;
          console.log(this.user);

          if (authState.user.signInUserSession.accessToken.payload["cognito:groups"]) {
            // This sets what group the user is in. Based on this group we set what perspectives will show.  Ex: The 'Administration' link only shows in the nav bar for users in the Admins group
            this.userGroup = authState.user.signInUserSession.accessToken.payload["cognito:groups"][0];
          } else {
            console.log("No usergroup found");
          }

          this.preferredMFA = this.user.preferredMFA;
        }
      });
  }

这是我的routing.ts文件

import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module';
import { Routes, RouterModule } from '@angular/router';


import { AuthenticationComponent } from './components/authentication/authentication.component';
import { HomeComponent } from './components/home/home.component';
import { NotFoundComponent } from './components/not-found/not-found.component';


export const ROUTES: Routes = [
    {path: '', component: AuthenticationComponent},
    {path: 'home', component: HomeComponent},
    {path: '**', component: NotFoundComponent}
];

export const ROUTING: ModuleWithProviders = RouterModule.forRoot(ROUTES)

Answer 1

Navigate采用字符串数组，而不是字符串。

this.router.navigate(['/home']);

this.router.navigate不调用组件构造函数-Angular 5 / AWS Amplify

1 个答案: