Angular 2 Organisieren AuthGuard (canActivate) und AuthService Code

Question

Von meinem aktuellen Code, wenn sie mit canActivate auf eine Seite Routing, ich bin in der Lage, die Authentifizierungsdaten von dem Server mit dem unten

auth.guard.ts zu erreichen (1 Version)

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private router: Router, private http: Http) { } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     return this.http.post('/api/authenticate', options) 
      .map(res => res.json()) 
      .map((res) => { 
       if (res.response) { 
        return true; 
       } else { 
        this.router.navigate(['/register']); 
        return false; 
       } 
      }); 
    } 
} 

ich möchte den Code in canActivate zu trennen, wie unten auth.service.ts, aber es ist nicht für die hTTP-Anforderung warten zu beenden und zurück

auth.service .ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class AuthService { 
    constructor(private http: Http) { } 

    authenticate() :Observable<any>{ 
     let headers = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: headers }); 

     return this.http.post('/api/authenticate', { options }) 
      .map(res => res.json()) 
    } 
} 

auth.guard.ts (Version 2)

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 
import { AuthService } from './auth.service'; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private authService: AuthService, private router: Router, private http: Http) { } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     if(this.authService.authenticate()){ 
      return true; 
     }else{ 
      this.router.navigate(['/register]) 
      return false; 
     } 
    } 
} 

Was bin ich?

Answer 1

auth.guard.ts (Version 3)

export class AuthGuard implements CanActivate { 
    constructor(private authService: AuthService, private router: Router, private http: Http) { } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     return this.authService.authenticate().map((res) => { 
      if (res.response) { 
       return true; 
      } else { 
       this.router.navigate(['/register']); 
       return false; 
      } 
     }) 

    } 
} 

Above Code Kette Ihr Observablen. Aber es gibt ein anderes Problem mit Ihrem Code - if(res.response) {return true}, wenn es eine Antwort gibt, könnte es "Benutzer existiert und angemeldet" oder "Benutzer existiert nicht". Sie geben also true für beide Fälle zurück. Das musst du reparieren.