Угловое 2 Организация AuthGuard (canActivate) и AuthService код

Question

Из моего текущего кода, при маршрутизации на страницу с canActivate, я в состоянии достигнуть данных аутентификации от сервера с ниже

auth.guard.ts (версия 1)

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

Я хотел бы, чтобы отделить код внутри canActivate до auth.service.ts, как показано ниже, но это не ждет запроса HTTP, чтобы закончить и вернуться

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 (версия 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; 
     } 
    } 
} 

Что мне не хватает?

Answer 1

auth.guard.ts (версия 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; 
      } 
     }) 

    } 
} 

выше код цепи ваши наблюдаемыми. Но есть еще одна проблема с вашим кодом - if(res.response) {return true}, когда есть ответ, это может быть «пользователь существует и вошел в систему» ​​или «пользователь не существует». Таким образом, вы возвращаете true для обоих случаев. Это вам нужно исправить.