Comment implémenter AuthGuard en attente d'une connexion dans Angular 2

Question

Je suis en train de créer une application web en utilisant Angular 2 (RC.3) avec @angular/router alpha.8. Ce nouveau routeur fournit "Guard", il aide notre application à gérer les redirections d'autorisation.

Un document officiel explique comment créer et utiliser Guard, mais son exemple de code ne tient pas compte du temps de connexion. https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

Je veux donc utiliser Observable (ou Promise ) dans celui-ci.

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

Mais dans le code ci-dessus, canActivate() les fonctions de retour Subscription parce que Observable.prototype.subscribe() renvoie à Subscription .

Que dois-je faire ?

Answer 1

Il suffit d'utiliser map() au lieu de subscribe() . Le routeur effectue lui-même la souscription pour initier la requête.

N'oubliez pas d'importer map Angular 2 HTTP GET avec erreur TypeScript http.get(...).map n'est pas une fonction dans [null].

Je pense que ça devrait faire ce que vous voulez :

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