Come implementare AuthGuard in attesa di una connessione in Angular 2

Question

Sto creando un'applicazione Web utilizzando Angular 2 (RC.3) con @ angular/router alpha.8. Questo nuovo router fornisce "Guard", aiuta il nostro a implementare per gestire il reindirizzamento delle autorizzazioni.

Un documento ufficiale viene scritto come creare e utilizzare Guard, ma il suo codice di esempio non tiene conto del tempo di connessione. https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

Quindi voglio utilizzare Observable (o Promise) in esso.

export class ApiService { 
    constructor(private _http: Http) {} 
    head(url: string): Observable<any> { 
    const req: any = { method: RequestMethod.Head, url: URI_SCHEME + url }; 

    return this._http.request(new Request(req)); 
    } 
} 

export class AuthGuard implements CanActivate { 
    constructor(private _api: ApiService) {} 

    canActivate(): Observable<boolean> { 
    return this._api.head('/users/self').subscribe(
    (): Observable<boolean> => { 
     // when gets 200 response status... 
     return Observable.of(true); 
     }, 
    (): Observable<boolean> => { 
     // when gets 401 error response... 
     // TODO: redirect to sign-in page. 
     return Observable.of(false); 
     } 
    ); 
    } 
} 

Ma nel codice di cui sopra, canActivate() funzione restituisce Subscription esempio perché Observable.prototype.subscribe() rendimenti Subscription.

Cosa devo fare?

Answer 1

Basta usare map() anziché subscribe(). Il router esegue la sottoscrizione autonomamente per avviare la richiesta.

Non dimenticare di importare mapAngular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]

penso che questo dovrebbe fare quello che vuoi:

export class AuthGuard implements CanActivate { 
    constructor(private _api: ApiService) {} 

    canActivate(): Observable<boolean> { 
    return this._api.head('/users/self') 
    .map(response => { 
     this.doSomethingWithResponse(response.json())); 
     return true; 
    }) 
    .catch(err => Observable.of(false)); 
    } 
}