Eckige 4 - canActivate beobachtbaren nicht aufgerufen werden

Herausforderungen des AuthService mit RxJs

Dies war eines der Dinge, die ich kämpfte, als Wechsel von AngularJs ist, verspricht Winkel die Beobachtbaren Muster. Sehen Sie verspricht, werden pull-Benachrichtigungen und observablen sind push-Benachrichtigungen. Als solche müssen Sie überdenken Ihre AuthService, so dass es verwendet eine push-Muster. Ich dachte in Bezug auf sich ziehen, auch wenn ich schrieb, die Arbeit Observablen. Ich konnte nicht aufhören zu denken in Bezug auf sich ziehen.

Mit einem Versprechen-Muster war es einfacher. Wenn die AuthService erstellt wurde, wäre es entweder ein Versprechen, das aufgelöst wird, auf "nicht angemeldet" oder es wäre ein async Versprechen, dass würde die "Wiederherstellung protokolliert Staat". Sie könnte dann eine Methode namens isLoggedIn() zurückgeben würde, die Versprechen. Das erlaubt Ihnen, leicht zu handhaben Verzögerungen zwischen der Anzeige von Benutzer-Daten und Sie erhalten die Benutzerdaten.

AuthService als Push-Dienst

Nun, schalten wir auf die Observablen und die verb "ist" muss geändert werden, "wenn". Machen diese kleine änderung hilft Sie re-denken, wie die Dinge sind zu arbeiten. So ermöglicht das umbenennen "isLoggedIn" zu "whenLoggedIn ()", die eine Beobachtbare, dass sendet Daten, wenn ein Benutzer authentifiziert.

class AuthService {
     private logIns: Subject = new Subject<UserData>();

     public setUser(user: UserData) {
          this.logIns.next(user);
     }

     public whenLoggedIn(): Observable<UserData> {
          return this.logIns;
     }
}

//example
AuthService.whenLoggedIn().subscribe(console.log);
AuthService.setUser(new UserData());

Wenn ein Benutzer übergeben setUser es emittiert, um abonniert, dass ein neuer Benutzer authentifiziert wurde.

Probleme Mit Dem Obigen Ansatz

Oben bringt einige Probleme, die behoben werden müssen.

• abonnieren whenLoggedIn hören wird für neue Nutzer für immer. Die ziehen Strom ist nie abgeschlossen.
• Es gibt kein Konzept des "aktuellen Status". Die bisherigen setUser verloren, nachdem Sie geschoben, an die Abonnenten.
• Es nur sagt Ihnen, wenn ein Benutzer authentifiziert ist. Nicht, wenn es keine aktuellen Benutzers.

Können wir beheben einige dieser durch den Wechsel von Subject zu BehaviorSubject.

class AuthService {
     private logIns: Subject = new BehaviorSubject<UserData>(null);

     public setUser(user: UserData) {
          this.logIns.next(user);
     }

     public whenLoggedIn(): Observable<UserData> {
          return this.logIns;
     }
}

//example
AuthService.whenLoggedIn().first().subscribe(console.log);
AuthService.setUser(new UserData());

Dies ist sehr viel näher an dem, was wir wollen.

Änderungen

• BehaviorSubject immer wieder den letzten Wert für jeden neue Abonnement.
• whenLoggedIn().first() wurde Hinzugefügt abonnieren und auto Abmelden, nachdem der erste Wert empfangen wird. Wenn wir nicht BehaviorSubject dies würde block, bis jemand rief setUser die vielleicht nie passieren.

Probleme Mit BehaviorSubject

BehaviorSubject funktioniert nicht für AuthService und ich werde zeigen, mit diesem Beispiel-code hier.

class AuthService {
     private logIns: Subject = new BehaviorSubject<UserData>(null);

     public constructor(userSessionToken:string, tokenService: TokenService) {
          if(userSessionToken) {
              tokenService.create(userSessionToken).subscribe((user:UserData) => {
                    this.logIns.next(user);
               });
         }
     }

     public setUser(user: UserData) {
          this.logIns.next(user);
     }

     public whenLoggedIn(): Observable<UserData> {
          return this.logIns;
     }
}

Hier ist, wie würde das problem in deinem code.

//example
let auth = new AuthService("my_token", tokenService);
auth.whenLoggedIn().first().subscribe(console.log);

Oben erstellt eine neue AuthService mit einem token zur Wiederherstellung der Benutzer-session, aber wenn es läuft die Konsole einfach druckt "null".

Dies geschieht, weil BehaviorSubject erstellt wird, mit einem anfänglichen Wert von null, und der Vorgang zur Wiederherstellung der Benutzer-Sitzung passieren wird später, nach der HTTP-Aufruf abgeschlossen ist. AuthService weiterhin emittieren null bis die Sitzung wieder hergestellt, aber das ist ein problem, wenn Sie wollen, verwenden Sie route Aktivatoren.

ReplaySubject Ist Besser

Wollen wir daran erinnern, den aktuellen Benutzer, aber nicht emittieren etwas, bis wir wissen, ob es ein user oder nicht. ReplaySubject ist die Antwort auf dieses problem.

Hier ist, wie Sie es verwenden würden.

class AuthService {
     private logIns: Subject<UserData> = new ReplaySubject(1);

     public constructor(userSessionToken:string, tokenService: TokenService) {
          if(userSessionToken) {
              tokenService.create(userSessionToken).subscribe((user:UserData) => {
                    this.logIns.next(user);
               }, ()=> {
                    this.logIns.next(null);
                    console.error('could not restore session');
               });
         } else {
             this.logIns.next(null);
         }
     }

     public setUser(user: UserData) {
          this.logIns.next(user);
     }

     public whenLoggedIn(): Observable<UserData> {
          return this.logIns;
     }
}

//example
let auth = new AuthService("my_token", tokenService);
auth.whenLoggedIn().first().subscribe(console.log);

Die oben nicht warten, bis der erste Wert entsteht durch whenLoggedIn. Es wird die first Wert-und Abmelden.

ReplaySubject funktioniert, weil es erinnert sich an die 1 Elemente oder strahlt nichts. Es ist die nichts Teil, der wichtig ist. Wenn wir AuthService in canActivate wir wollen warten, bis ein Benutzer Zustand ist bekannt.

CanActivate Beispiel

Diesem jetzt macht es viel einfacher zu schreiben, die ein Benutzer guard, leitet zu einer login-Bildschirm oder die Möglichkeit, die route zu ändern.

class UserGuard implements CanActivate {
      public constructor(private auth: AuthService, private router: Router) {
      }

      public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
           return this.auth.whenLoggedIn()
                      .first()
                      .do((user:UserData) => {
                          if(user === null) {
                              this.router.navigate('/login');
                          }
                      })
                      .map((user:UserData) => !!user);
      }

Dieser wird der Ertrag einer Beobachtbaren true oder false, wenn es ein Benutzer-session. Es wird auch block-router ändern, bis dieser Staat bekannt ist (das heißt, sind wir abrufen der Daten vom server?).

Es wird auch umleiten, die router login-Bildschirm, wenn es keine user-Daten.

Dies ist, wie ich es gemacht

import { Injectable, Inject, Optional } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { Observable } from "rxjs/Rx";
import { AuthService, MyLogin, FacebookLogin, GoogleLogin } from "./auth.service";


@Injectable()

export class AuthGuard implements CanActivate  {

  constructor() {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

    //return this.typeSelector(SigninComponent.loginTypeProperty);
    let isLogged: boolean = AuthService.loggedIn;
    window.alert('isLogged =' + isLogged);
    return isLogged;
  }
}

Dies ist in einer anderen situation, wo ich das Kennwort ändern:

import { Injectable, Inject, Optional } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { Observable } from "rxjs/Rx";
import { NewPasswordAuthService } from "./new-password.auth.service";
import { Router, ActivatedRoute } from '@angular/router';
import { IPwCookie } from './IPwCookie.interface';


@Injectable()
export class NewPasswordGuard implements CanActivate  {


  constructor(private authService: NewPasswordAuthService, private router: Router, private route: ActivatedRoute,)
  {

  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {


    console.log('query params' + JSON.stringify(route.params));
    let hash:string = route.params.hash;
    let userId: number = route.params.userId;
    console.log('query params string' + JSON.stringify(route.params.hash));
    return  this.authService.activate(hash)
        .map(
          (): boolean => {
            console.log('check passed =' + NewPasswordAuthService.isAuthenticated());

            let passwordCookie:IPwCookie = {
              hash: hash,
              userId: userId
            };

            localStorage.setItem('password_hash', JSON.stringify(passwordCookie));
            return NewPasswordAuthService.isAuthenticated();
          },
          (error) => {console.log(error)}
        );
  }

}

Soweit ich sehe, sollten Sie versuchen, das hinzufügen einer return-Typ der map-Funktion war dies eine Sache, die mir Probleme. Wenn Sie nicht fügen Sie eine return-Typ der map-Funktion, die in diesem Kontext funktioniert es nicht.

So einfach tun .anzeigen((): boolean => {} ...)