So implementieren Sie AuthGuard wartet eine Verbindung in Angular 2

Question

Ich erstelle eine Webanwendung mit Angular 2 (RC.3) mit @ angular/router alpha.8. Dieser neue Router bietet "Guard", es hilft uns zu implementieren, Autorisierung Redirect zu behandeln.

Eine offizielle Dokumente sind geschrieben, wie Guard erstellt und verwendet wird, aber der Beispielcode berücksichtigt keine Verbindungszeit. https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

Also ich möchte Observable (oder Promise) darin verwenden.

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

Aber in dem obigen Code, kehrt canActivate() Funktion Subscription Instanz weil Observable.prototype.subscribe() kehrt Subscription.

Was soll ich tun?

Answer 1

Verwenden Sie einfach map() anstelle von subscribe(). Der Router führt das Abonnement selbst aus, um die Anforderung zu initiieren.

Vergessen Sie nicht mapAngular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]

Ich denke, das sollte das tun, was Sie wollen, zu importieren:

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