Angular2 canActivate() async işlevini çağırıyor

Question

Uygulamamdaki bazı sayfalara erişimi kısıtlamak için Angular2 yönlendirici korumalarını kullanmaya çalışıyorum. Firebase Kimlik Doğrulaması kullanıyorum. Bir kullanıcının Firebase ile giriş yapıp yapmadığını kontrol etmek için, geri arama ile FirebaseAuth nesnesinde .subscribe() nesnesini aramalıyım. Bu bekçi için kodudur:, üzerinde ya authenticated veya not authenticated bekçi olan bir sayfaya bir gezinme konsola yazdırılır

import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { AngularFireAuth } from "angularfire2/angularfire2"; 
import { Injectable } from "@angular/core"; 
import { Observable } from "rxjs/Rx"; 

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private auth: AngularFireAuth, private router: Router) {} 

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean { 
     this.auth.subscribe((auth) => { 
      if (auth) { 
       console.log('authenticated'); 
       return true; 
      } 
      console.log('not authenticated'); 
      this.router.navigateByUrl('/login'); 
      return false; 
     }); 
    } 
} 

(Firebase yanıt beklerken bazı gecikmeden sonra). Ancak navigasyon hiçbir zaman tamamlanmamıştır. Ayrıca, giriş yapmadıysam /login rotasına yönlendirilirim. Yani, sahip olduğum sorun return true kullanıcı için istenen sayfayı görüntülemiyor. Bunun bir geri çağırma kullanıyorum çünkü varsayıyorum, ama aksi takdirde nasıl yapacağını anlayamıyorum. Düşüncesi olan var mı?

Answer 1

canActivate ihtiyaçları tamamlar bir Observable dönmek için:

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private auth: AngularFireAuth, private router: Router) {} 

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean { 
     return this.auth.map((auth) => { 
      if (auth) { 
       console.log('authenticated'); 
       return true; 
      } 
      console.log('not authenticated'); 
      this.router.navigateByUrl('/login'); 
      return false; 
     }).first(); // this might not be necessary - ensure `first` is imported if you use it 
    } 
} 

eksik bir return vardır ve subscribe() bir Subscription değil Observable

Answer 2

canActivate döndürdüğü için bir Promise dönebilirsiniz map() yerine subscribe() kullandığını boolean da

Answer 3

Async mantık bölümünü işlemek için Observable kullanabilirsiniz. İşte test ettiğim kod şu şekildedir:

import { Injectable } from '@angular/core'; 
import { CanActivate } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import { DetailService } from './detail.service'; 

@Injectable() 
export class DetailGuard implements CanActivate { 

    constructor(
    private detailService: DetailService 
) {} 

    public canActivate(): boolean|Observable<boolean> { 
    if (this.detailService.tempData) { 
     return true; 
    } else { 
     console.log('loading...'); 
     return new Observable<boolean>((observer) => { 
     setTimeout(() => { 
      console.log('done!'); 
      this.detailService.tempData = [1, 2, 3]; 
      observer.next(true); 
      observer.complete(); 
     }, 1000 * 5); 
     }); 
    } 
    } 
}