Verbinden Sie den Authentifizierungsdienst mit dem AuthGuard (einfaches Problem)

Question

Ich denke, es ist ein ziemlich einfaches Problem, aber leider weiß ich nicht wirklich, wie man damit umgeht.

Ich versuche, meine UserAuthenticationService Service mit der ActivationGuard zu verbinden.

UserAuthenticationService.ts:

import {Injectable} from '@angular/core'; 
import {Http} from '@angular/http'; 

@Injectable() 
export class UserAuthenticationService { 
    isUserAuthenticated: boolean = false; 
    username: string; 

    constructor(private http: Http) { 
    } 

    authentication() { 
     this.http.get(`http://localhost/api/auth/isLogged/${this.username}`) 
      .subscribe(res => { //^^returns true or false, depending if the user is logged or not 
        this.isUserAuthenticated = res.json(); 
       }, 
       err => { 
        console.error('An error occured.' + err); 
       }); 
    } 


} 

ActivationGuard.ts

import {Injectable} from '@angular/core'; 
import {Router, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router'; 
import {Observable} from 'rxjs/Observable'; 
import {UserAuthenticationService} from './UserAuthenticationService'; 

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

@Injectable() 
export class WorksheetAccessGuard implements CanActivate { 

    constructor(private router: Router, private userService: UserAuthenticationService) { 
    } 

    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 

     if (this.userService) { 
      this.router.navigate(['/']); 
      return false; 
     } 
     return true; 
    } 
} 

Hinweis

Es funktioniert großartig, wenn ich localStorage nur verwenden, um die Informationen zu speichern, wenn der Benutzer angemeldet ist oder nicht:

public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 

    if (!localStorage.getItem('currentUser')) { 
     this.router.navigate(['/']); 
     return false; 
    } 
    return true; 
} 

Aber wie kann ich den Dienst mit dem Schutz verbinden? Ich freue mich auf jede Art von Hilfe. Vielen Dank im Voraus.

Wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen und ich werde meinen Beitrag bearbeiten.

Answer 1

Anruf Authentifizierung() Methode des UserAuthenticationService entweder in Konstruktor oder On ngOnit dann setzt er den isUserAuthenticated variabel und daß

UserAuthenticationService.ts in den ActivationGuard.ts verwenden:

import {Injectable} from '@angular/core'; 
import {Http} from '@angular/http'; 

@Injectable() 
export class UserAuthenticationService { 
    isUserAuthenticated: boolean = false; 
    username: string; 

    constructor(private http: Http) { 
    this.authentication(); 
    } 

    authentication() { 
     this.http.get(`http://localhost/api/auth/isLogged/${this.username}`) 
      .subscribe(res => { //^^returns true or false, depending if the user is logged or not 
        this.isUserAuthenticated = res.json(); 
       }, 
       err => { 
        console.error('An error occured.' + err); 
       }); 
    } 


} 

ActivationGuard.ts

@Injectable() 
export class WorksheetAccessGuard implements CanActivate { 

    constructor(private router: Router, private userService: UserAuthenticationService) { 
    } 

    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 

     if (this.userService.isUserAuthenticated) { 
      this.router.navigate(['/']); 
      return false; 
     } 
     return true; 
    } 
} 

Answer 2

Dies ist nicht der richtige Ansatz dafür. Jedes Mal, wenn Sie den Dienst aufrufen, wird eine neue Instanz initialisiert und Sie erhalten eine falsche Nachricht.

Sie sollten eine Singleton Dienstinstanz (über das Hauptmodul in der App) erstellen - wo es Ihre App-Status (im Speicher/local)

Dann enthalten wird, wenn Sie UserAuthenticationService nennen wollen - Sie gewonnen‘ t Aktualisiere seinen owbn-Parameter, aber den main's (den Singleton).

Ich empfehle Ihnen, eine BehaviourSubject zu verwenden (lesen Sie darüber, es ist wie ein Thema, aber es gibt auch seinen letzten Wert, ohne zu warten, um einen Wert manuell auszugeben).

Von diesem Punkt aus kann Ihre App von überall sehen, ob der Benutzer angemeldet ist oder nicht.