Angular 4 Implicit Flow Callback và Router Guard

Question

Cách tốt nhất để xử lý dòng chảy ẩn Gọi lại trong Angular 4 là gì? Tôi muốn Guard đợi cho đến khi người dùng được chuyển hướng trở lại với token và nó được lưu trước khi Guard trả về true hoặc false, tôi sẽ nhận được Route Denied trong vài giây trước khi tôi được chuyển hướng trở lại để kiểm tra token. Có cách nào tốt hơn để xử lý các AuthGuard hơn những gì tôi đang làm vì vậy tôi không nhận được truy cập bị từ chối trước khi xác thực hoàn thành?

Làm cách nào để bảo vệ bộ định tuyến đợi chuyển hướng?

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

Nếu bạn muốn bảo vệ đợi tác vụ không đồng bộ, bạn cần thay đổi AuthService để trả lại giá trị quan sát và phát ra mà bạn cần bên trong tác vụ không đồng bộ mà bạn muốn đợi, trong trường hợp giảm(). Sau đó thực hiện một thuê bao trong bảo vệ. Bằng cách này, bạn có thể làm cho bảo vệ của bạn chờ đợi cho bất kỳ nhiệm vụ không đồng bộ.

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

phần của 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

CácPhương phápcó thể trả về một số Observable, Promise hoặc Boolean và Angular sẽ biết tháo gỡ và xử lý mọi thứ không đồng bộ. Bạn có thể thay đổi mã của mình để kiểm tra dữ liệu cần thiết trước khi trả lại hoặc hoàn thành/thất bại Observable hoặc đã giải quyết/từ chối Promise đến bộ định tuyến Góc và gọi this.naviationService.AccessDenied() do chức năng không đồng bộ đó.