Angular 4 Impliziter Fluss Callback und Router Guard

Question

Was ist der beste Weg, um den impliziten Fluss Callback in Angular 4 zu behandeln? Ich möchte, dass der Wächter wartet, bis der Benutzer mit dem Token zurückgeleitet wird, und er wird gespeichert, bevor der Wächter "Wahr" oder "Falsch" zurückgibt. Ich bekomme die Route "Zugriff verweigert" für ein paar Sekunden, bevor ich zurückgeleitet werde, um das Token zu überprüfen. Gibt es eine bessere Möglichkeit, mit dem AuthGuard umzugehen als mit dem, was ich gerade mache? Ich bekomme den Zugriff nicht verweigert, bevor die Authentifizierung abgeschlossen ist?

Wie kann ich den Router Guard warten auf die Umleitung?

AppComponent

ngOnInit() {  

     //if there is a hash then the user is being redirected from the AuthServer with url params 
     if (window.location.hash && !this.authService.isUserLoggedIn()) {  

      //check the url hash 
      this.authService.authorizeCallback(); 

     } 
     else if (!this.authService.isUserLoggedIn()) {   

      //try to authorize user if they aren't login 
      this.authService.tryAuthorize();  

    }  
} 

AuthSerivce

tryAuthorize() { 
     //redirect to open id connect /authorize endpoint 
     window.location.href = this.authConfigService.getSignInEndpoint(); 
    } 

    authorizeCallback() {  

     let hash = window.location.hash.substr(1); 

     let result: any = hash.split('&').reduce(function (result: any, item: string) { 
      let parts = item.split('='); 
      result[parts[0]] = parts[1]; 
      return result; 
     }, {}); 


     if (result.error && result.error == 'access_denied') { 
      this.navigationService.AccessDenied(); 
     } 
     else { 

      this.validateToken(result); 
     } 
    } 


    isUserLoggedIn(): boolean {  
     let token = this.getAccessToken(); 

     //check if there is a token  
     if(token === undefined || token === null || token.trim() === '') 
     { 
      //no token or token is expired; 
      return false; 
     } 

     return true; 
    } 


    getAccessToken(): string {    

     let token = <string>this.storageService.get(this.accessTokenKey); 


     if(token === undefined || token === null || token.trim() === '') 
     { 
      return ''; 
     } 

     return token; 
    } 

    resetAuthToken() { 
     this.storageService.store(this.accessTokenKey, ''); 
    } 

    validateToken(tokenResults: any) {   

     //TODO: add other validations   

     //reset the token 
     this.resetAuthToken(); 

     if (tokenResults && tokenResults.access_token) { 

      //store the token 
      this.storageService.store(this.accessTokenKey, tokenResults.access_token); 

      //navigate to clear the query string parameters 
      this.navigationService.Home(); 

     } 
     else { 
      //navigate to Access Denied 
      this.navigationService.AccessDenied(); 
     } 

    } 
} 

AuthGuard

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot){ 

    var hasAccess = this.authService.isUserLoggedIn();   

    if(!hasAccess) 
    { 
     this.naviationService.AccessDenied(); 
     return false; 
    } 
    return true;  
    } 

Answer 1

Wenn Sie möchten, dass Ihr Wächter auf eine asynchrone Aufgabe wartet, müssen Sie Ihren AuthService ändern, um einen beobachtbaren und emittierten Wert zurückzugeben, den Sie innerhalb der asynchronen Aufgabe benötigen, die Sie warten möchten, in Ihrem Fall reduce(). Danach machen Sie ein Abonnement in der Wache. Auf diese Weise können Sie Ihren Wächter auf jede asynchrone Aufgabe warten lassen.

AuthGuard

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot){ 

    this.authService.isUserLoggedIn().map(logged => { 
     if (logged) { 
      return true; 
     } else { 
      this.naviationService.AccessDenied(); 
      return false; 
     } 
    }).catch(() => { 
     this.naviationService.AccessDenied(); 
     return Observable.of(false); 
    }); 
    } 
} 

Teil AuthService

isUserLoggedIn(): Observable<boolean> { 
    return new Observable((observer) => { 
     let hash = window.location.hash.substr(1); 

     let result: any = hash.split('&').reduce(function (result: any, item: string) { 
     let parts = item.split('='); 
     result[parts[0]] = parts[1]; 

     if (result.error && result.error == 'access_denied') { 
      observer.next(false); 
      observer.complete(); 
     } 
     else { 
      this.validateToken(result); 
     } 
     let token = this.getAccessToken(); 

     //check if there is a token  
     if(token === undefined || token === null || token.trim() === '') 
     { 
      //no token or token is expired; 
      observer.next(false); 
      observer.complete(); 
     } 

     observer.next(true); 
     observer.complete(); 
     }, {}); 
    }); 
} 

Answer 2

Die CanActivate Methode kann eine Observable, Promise oder 10 zurückgeben, und Angular wird wissen, um es auszupacken und alles async zu handhaben. Sie können Ihren Code ändern, um nach den erforderlichen Daten zu suchen, bevor Sie entweder einen abgeschlossenen/fehlgeschlagenen Observable oder einen aufgelösten/zurückgewiesenen Promise an den Angular-Router senden und this.naviationService.AccessDenied() als Ergebnis dieser asynchronen Funktion aufrufen.