कोणीय 4 लागू प्रवाह कॉलबैक और राउटर गार्ड

Question

कोणीय 4 में अंतर्निहित प्रवाह कॉलबैक को संभालने का सबसे अच्छा तरीका क्या है? मैं चाहता हूं कि गार्ड तब तक प्रतीक्षा करे जब तक उपयोगकर्ता को टोकन के साथ रीडायरेक्ट नहीं किया जाता है और गार्ड को सही या गलत लौटने से पहले संग्रहीत किया जाता है, मुझे टोकन की जांच करने के लिए रीडायरेक्ट करने से पहले कुछ सेकंड के लिए एक्सेस अस्वीकृत मार्ग मिल रहा है। क्या मैं कर रहा हूं उससे ऑथगार्ड को संभालने का कोई बेहतर तरीका है इसलिए मुझे प्रमाणीकरण पूर्ण होने से पहले प्रवेश अस्वीकार नहीं किया गया है?

मैं राउटर गार्ड को रीडायरेक्ट के लिए कैसे इंतजार करूं?

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

यदि आप चाहते हैं कि आपका गार्ड एसिंक्रोनस कार्य की प्रतीक्षा कर रहा है, तो आपको अपने एथस सर्विस को एक अवलोकन और उत्सर्जित मूल्य वापस करने की आवश्यकता है जिसे आपको अतुल्यकालिक कार्य के अंदर की आवश्यकता है, जिसे आप प्रतीक्षा करना चाहते हैं, आपके मामले में इसकी कमी()। इसके बाद गार्ड में सदस्यता लें। इस तरह आप अपने गार्ड को किसी भी असीमित कार्य के लिए इंतजार कर सकते हैं।

AuthGuard 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

CanActivate विधि Observable, Promise, या Boolean लौटा सकती है, और कोणीय इसे अनचाहे करने और सब कुछ एसिंक को संभालने के बारे में जान पाएगा। आप एंगुलर राउटर में एक पूर्ण/असफल Observable या हल/अस्वीकार Promise लौटने से पहले आवश्यक डेटा की जांच करने के लिए अपने कोड को बदल सकते हैं, और उस अतुल्यकालिक कार्य के परिणामस्वरूप this.naviationService.AccessDenied() पर कॉल कर सकते हैं।