Angulaire 2 - Routage - CanActivate travailler avec Observables

J'ai un AuthGuard (utilisé pour le routage) qui implémente CanActivate.

canActivate() {
    return this.loginService.isLoggedIn();
}

Mon problème, c'est que le CanActivate-résultat dépend d'un http-get-résultat - le LoginService retourne un Observables.

isLoggedIn():Observable<boolean> {
    return this.http.get(ApiResources.LOGON).map(response => response.ok);
}

Comment puis-je apporter à ceux - faites CanActivate dépendent d'un backend de l'état?

Avez-vous lu ici? angular.io/docs/ts/latest/guide/router.html recherche de la Route des Gardes, Ici est la référence de l'api pour CanActivate: angulaire.io/docs/ts/latest/api/routeur/index/... comme vous le voyez, il peut retourner les booléens ou Observables<boolean>
canActivate() peut retourner un Observable, assurez-vous que le Observable a terminé (c'est à dire. observer.complete()).
que faire si l'observable émet plus de valeurs et réalise alors? Quel est le garde de le faire? Ce que j'ai vu jusqu'à présent est l'utilisation de take(1) Rx de l'opérateur à réaliser la completnes de flux, Que faire si j'ai oublié de l'ajouter?

InformationsquelleAutor Philipp | 2016-06-21

118

Vous devez mettre à niveau "@angulaire/routeur" à la dernière . par exemple,"3.0.0-alpha.8"

modifier AuthGuard.ts
```
@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private loginService:LoginService, private router:Router) { }

    canActivate(next:ActivatedRouteSnapshot, state:RouterStateSnapshot) {
        return this.loginService.isLoggedIn().map(e => {
            if (e) {
                return true;
            }
        }).catch(() => {
            this.router.navigate(['/login']);
            return Observable.of(false);
        });
    }   
}
```
Si vous avez des questions, posez-les moi！
- Il est intéressant de souligner que cela fonctionne avec les promesses d'une manière très semblable. Pour ma mise en œuvre, en supposant isLoggedIn() est un Promise, vous pouvez le faire isLoggedIn().then((e) => { if (e) { return true; } }).catch(() => { return false; }); j'espère que cela aide les futurs voyageurs!
- J'ai dû ajouter import 'rxjs/add/observable/of';
- pas une bonne réponse maintenant OMI .. il ne fournit aucun détail de ce qui se passe côté serveur ... il est à jour à la version alpha! ... il n'a pas suivi cette meilleure pratique .. angulaire.io/docs/ts/latest/guide/... .. voir ma mise à jour de réponse ci-dessous (j'espère qu'un jour ci-dessus)
- canActivate devrait revenir Observables<boolean>
- Une Grande Aide 🙂 Merci
- canActivate() accepte aussi le type de retour de la Observables<boolean> afin que nous puissions retourner directement observables comme<boolean>
- Maintenant, il est import { Observable, of } from 'rxjs';
InformationsquelleAutor Kery Hu

La mise à jour de Kery Hu réponse Angulaire 5 et RxJS 5.5 où catch opérateur est obsolète. Vous devez maintenant utiliser la catchError opérateur en conjonction avec tuyau et locative opérateurs.

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { catchError, map} from 'rxjs/operators';
import { of } from 'rxjs/observable/of';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private loginService: LoginService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>  {
    return this.loginService.isLoggedIn().pipe(
      map(e => {
        if (e) {
          return true;
        } else {
          ...
        }
      }),
      catchError((err) => {
        this.router.navigate(['/login']);
        return of(false);
      })
    );
  }   

}

Il a travaillé, merci.

InformationsquelleAutor Derek Hill

7

canActivate() accepte Observable<boolean> comme valeur de retour. Le garde va attendre le Observables pour résoudre et regardez la valeur. Si le "vrai" il va passer de la case, sinon ( toutes les autres données ou jetés erreur ) rejettera la route.

Vous pouvez utiliser le .map opérateur de transformer le Observable<Response> à Observable<boolean> comme suit:
```
canActivate(){
    return this.http.login().map((res: Response)=>{
       if ( res.status === 200 ) return true;
       return false;
    });
}
```
- que penser d'un bloc catch? le bloc catch est appelé si ses un 401 droit?
- Dans angulaire 4 ne fonctionne pas. Il a besoin d'un endroit pour définir un type générique.
InformationsquelleAutor mp3por
2

Je l'ai fait de cette façon:
```
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.userService.auth(() => this.router.navigate(['/user/sign-in']));}
```
Comme vous pouvez le voir je suis de l'envoi d'un repli de la fonction de userService.auth que faire si http échec de l'appel.

Et dans userService j'ai:
```
import 'rxjs/add/observable/of';

auth(fallback): Observable<boolean> {
return this.http.get(environment.API_URL + '/user/profile', { withCredentials: true })
  .map(() => true).catch(() => {
    fallback();
    return Observable.of(false);
  });}
```
- vraiment bonne réponse en termes de la .map() la fonction vraiment très bon 🙂 - ne pas utiliser le secours de rappel - au lieu de cela, je suis abonnée à la auth Observables dans le canActivate méthode - merci beaucoup pour l'idée
InformationsquelleAutor Karolis Grinkevičius

Cela peut vous aider à

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { AuthState } from 'src/app/shared/state';

export const ROLE_SUPER = 'ROLE_SUPER';

@Injectable()
export class AdminGuard implements CanActivate {

 @Select(AuthState.userRole)
  private userRoles$: Observable<string[]>;

  constructor(private router: Router) {}

 /**
   * @description Checks the user role and navigate based on it
   */

 canActivate(): Observable<boolean> {
    return this.userRoles$.pipe(
      take(1),
      map(userRole => {
        console.log(userRole);
        if (!userRole) {
          return false;
        }
        if (userRole.indexOf(ROLE_SUPER) > -1) {
          return true;
        } else {
          this.router.navigate(['/login']);
        }
        return false;
      })
    );
  } //canActivate()
} //class

InformationsquelleAutor Kalanka

0

Comment cela fonctionne pour vous, sans faire appel à vous abonner?
pour moi quand je l'appelle par mon .net API rien est de retour. J'ai appeler abonnez-vous sur mon auth service de garde comme ce alors seulement il rend réel les appels de l'API.
Mais depuis abonnez-vous est asynchrone mon canActivate garde ne fonctionne pas et l'utilisateur peut entrer dans la page.
```
AuthGauard service:

canActivate() { this.loginService.isLoggedIn()
      .subscribe(response => {
          if (!response) return false;})
return true;
}

loginService:
    isLoggedIn():Observable<boolean> {
        return this.http.get(ApiResources.LOGON).pipe(map(response => response.ok));
    }
```
InformationsquelleAutor Paresh Trivedi
-1

CanActivate fonctionne avec Observables, mais qui échoue lorsque les 2 appels sont effectués comme CanActivate:[Guard1, Guard2].

Ici, si vous retournez un Observables de faux, d'Guard1 puis aussi, il va vérifier dans Guard2 et de permettre l'accès à la route si Guard2 renvoie la valeur true.
Afin d'éviter que, Guard1 doit retourner un booléen au lieu d'Observables de type boolean.

InformationsquelleAutor Arjunsingh
-6

dans canActivate(), vous pouvez retourner un local de la propriété boolean (false par défaut dans votre cas).
```
private _canActivate: boolean = false;
canActivate() {
  return this._canActivate;
}
```
Et puis, dans la suite de l'LoginService, vous pouvez modifier la valeur de la propriété.
```
//...
this.loginService.login().subscribe(success => this._canActivate = true);
```
- vous êtes un génie, monsieur.
InformationsquelleAutor Nguyễn Việt Trung

Vous devez vous connecter pour publier un commentaire.