Connexion AWS Cognito et routage Angular 2

Question

Je ne parviens pas à accéder à la page suivante sur le succès de l'authentification de connexion AWS Cognito à partir de mon application Web angulaire 2. La connexion est réussie et je peux voir le jeton dans la console, mais quand je navigue sur le succès de l'authentification, je reçois l'erreur ci-dessous. Quelle est l'erreur?

Il me jette cette erreur:

EXCEPTION: Cannot read property 'navigate' of undefined 

Le code est le suivant:

Component

authenticateUser(loginCredentials:any){ 

     var authenticationData = { 
      Username : loginCredentials.username, 
      Password : loginCredentials.password 
     }; 
     //console.log("authenticationData..",authenticationData); 
     var authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData); 
     console.log("authenticationDetails..",authenticationDetails); 
     var poolData = { 
      UserPoolId : "cognito user pool id ", // Your user pool id here 
      ClientId : "cognito user pool client id" // Your client id here 
     }; 
     //console.log("poolData..",poolData); 
     var userPool = new AWSCognito.CognitoIdentityServiceProvider.CognitoUserPool(poolData); 
     console.log("userPool..",userPool); 
     var userData = { 
      Username : loginCredentials.username, 
      Pool : userPool 
     }; 
     //console.log("userData..",userData); 
     var cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData); 
     console.log("cognitoUser..",cognitoUser); 

     cognitoUser.authenticateUser(authenticationDetails, { 
      onSuccess: function (result) { 
       console.log('access token + ' + result.getAccessToken().getJwtToken()); 
       console.log('idToken + ' + result.idToken.jwtToken); 

       if(result.getAccessToken().getJwtToken() != null){ 

        this.router.navigate(['nextPage']); 

       } 


      }, 

      onFailure: function(err) { 
       console.log('error : ' + err); 
       alert(err); 
      }, 


     }) 

    } 

Answer 1

Votre meilleur pari est de la transformer en une promesse au lieu d'utiliser les callbacks et gérer votre logique à l'intérieur "alors et attraper". Cela vous permettra de mieux contrôler votre code et de le réutiliser ailleurs. J'ai converti votre code en une promesse et ajouté un de mon code qui a été callback avant et j'ai converti en une promesse de comparaison. Beaucoup d'ingénieurs utilisent des promesses ou des observables au lieu de callbacks cauchemar.

CI-DESSOUS, VOTRE CODE UTILISANT DES PROMESSES.

cognitoUser.authenticateUser(authenticationDetails).promise().then(result => { 
 
    console.log('access token + ' + result.getAccessToken().getJwtToken()); 
 
    console.log('idToken + ' + result.idToken.jwtToken); 
 
    if (result.getAccessToken().getJwtToken() !== null) { 
 
    this.router.navigate(['nextPage']); 
 
    } 
 
}).catch(err => { 
 
    console.log('error : ' + err); 
 
    alert(err); 
 
})

CI-DESSOUS, MON CODE ET UTILISATION CALLBACKS UTILISATION ALORS PROMESSES.

confirmSMSLogin(data: string) { 
 
    AWS.config.region = 'us-east-1'; 
 
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({ 
 
    IdentityPoolId: 'us-east-1:xxx-xxxx.etc', 
 
    }); 
 

 
    const cognitoIdentityServiceProvider = new AWS.CognitoIdentityServiceProvider(); 
 
    const params = { 
 
    ChallengeName: 'CUSTOM_CHALLENGE', 
 
    ClientId: 'asdf1234...etc', 
 
    ChallengeResponses: { 
 
     USERNAME: this.userModelService.LoginUserModelService[0].username, 
 
     ANSWER: data 
 
    }, 
 
    Session: this.userModelService.LoginUserModelService[0].session 
 
    }; 
 

 

 
    // DISABLED THIS FUNCTION WITH CALLBACKS WHICH LIMITED THE CONTROL OVER THE FUNCTION. 
 
    // cognitoIdentityServiceProvider.respondToAuthChallenge(params, function(err, data) { 
 
    // if (err) { 
 
    //  console.log(err, err.stack); 
 
    // } else { // successful response 
 
    //  console.log('Successful Authentication'); 
 
    //  AWS.config.credentials = new AWS.CognitoIdentityCredentials({ 
 
    //  IdentityPoolId: 'us-east-1:asdf1234..etc', 
 
    //  Logins: {'cognito-idp.us-east-1.amazonaws.com/us-east-asdf..etc': 
 
    //   data['AuthenticationResult']['IdToken']} 
 
    //  }); 
 
    // } 
 
    // }) 
 

 
    // Changed aws function callbacks to promise to better control of the flow. 
 
    return cognitoIdentityServiceProvider.respondToAuthChallenge(params).promise().then((data) => { 
 
    console.log('Success to Log in') 
 
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({ 
 
     IdentityPoolId: 'us-east-1:asdf1234...etc', 
 
     Logins: { 
 
     'cognito-idp.us-east-1.amazonaws.com/us-east-1asdf..etc': data['AuthenticationResult']['IdToken'] 
 
     } 
 
    }); 
 
    this.userModelService.UserSignedInModelService.push(this.jwtHelper1.decodeToken(data.AuthenticationResult.IdToken)) 
 
    this.router.navigate(['']) 
 
    }).catch((err) => { 
 
    if (err) { 
 
     console.log('has an error', err) 
 
    } 
 
    }) 
 
}