Ograniczenie wywołania i ostrzeżenia o routerach Angular 4 Implicit Flow

Question

Jaki jest najlepszy sposób obsługi niejawnego przepływu oddzwaniania w Angular 4? Chcę, żeby Strażnik czekał, aż użytkownik zostanie przekierowany z powrotem z tokenem i jest przechowywany, zanim Strażnik zwróci wartość true lub false. Odbieram dostęp Odmowa dostępu na kilka sekund, zanim nastąpi przekierowanie z powrotem, aby sprawdzić token. Czy istnieje lepszy sposób na obsłużenie AuthGuarda niż to, co robię, więc nie otrzymuję odmowy dostępu przed zakończeniem uwierzytelniania?

Jak sprawić, aby router czekał na przekierowanie?

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

Jeśli chcesz, aby strażnik czekał na asynchroniczne zadanie, musisz zmienić AuthService, aby zwrócić obserwowalną i emitowaną wartość, która jest potrzebna w asynchronicznym zadaniu, które chcesz poczekać, w twoim przypadku jego reduce(). Potem dokonaj subskrypcji w straży. W ten sposób możesz sprawić, że strażnik będzie czekał na każde asynchroniczne zadanie.

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); 
    }); 
    } 
} 

część 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

Metodamoże zwrócić wartość: Observable,lub Boolean, a Angular będzie wiedział, że powinien ją rozwinąć i obsłużyć wszystko asynchronicznie. Możesz zmienić swój kod, aby sprawdzić niezbędne dane, zanim zwrócisz albo zakończony/nieudany Observable lub rozwiązany/odrzucony Promise do routera kątowego i wywołanie this.naviationService.AccessDenied() w wyniku tej asynchronicznej funkcji.