Connecter le service d'authentification avec l'AuthGuard (question simple)

Question

Je pense que c'est un problème assez simple, mais malheureusement je ne sais pas vraiment comment le résoudre.

J'essaie de connecter mon UserAuthenticationService avec le ActivationGuard .

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

Note

Ça marche bien, si j'utilise juste localStorage pour stocker l'information si l'utilisateur est connecté ou non :

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

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

Mais comment puis-je connecter le service avec le gardien ? Je suis à l'écoute de tout type d'aide. Merci d'avance.

Si vous avez besoin de plus d'informations, faites-le moi savoir et je modifierai mon message.

Answer 1

Appelez la méthode authentication() de UserAuthenticationService, soit dans le constructeur, soit dans le ngOnit, puis définissez la variable isUserAuthenticated et utilisez-la dans ActivationGuard.ts.

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) {
    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

Ce n'est pas la bonne approche pour le faire. Chaque fois que vous appelez le service, il initialise une nouvelle instance et donc vous obtenez un false.

Vous devez créer une instance de service singleton (via le module principal de votre application) - qui contiendra l'état de votre application (en mémoire / stockage local).

Alors, quand tu appelleras UserAuthenticationService - vous ne mettrez pas à jour son paramètre owbn mais celui de la main ( le singleton).

Je vous suggère d'utiliser un BehaviourSubject ( lisez à ce sujet, c'est comme un Sujet mais il donne aussi sa dernière valeur sans attendre d'émettre une valeur manuellement).

À partir de là, votre application peut voir de n'importe où si l'utilisateur est connecté ou non.