Angular2 auth guard với yêu cầu và quan sát http

Question

tôi hiện đang triển khai một ứng dụng ví dụ angular2 với khởi động mùa xuân làm phụ trợ. Tôi đang gặp một số vấn đề với cơ chế bảo vệ giao diện người dùng và các quan sát.

tôi đang cố gắng để đạt được:

1. khi ai đó đi vào một con đường bảo vệ bảo vệ auth nên kiểm tra nếu người dùng đã được thiết lập trong biến dịch vụ auth
2. nếu nó không được thiết lập sau đó một http yêu cầu phải được phát hành để kiểm tra xem phiên có sẵn
3. phương thức dịch vụ phải trả về giá trị true/false (không đồng bộ do yêu cầu http có thể không)
4. nếu dịch vụ trả về sai trình bảo vệ sẽ chuyển hướng đến trang đăng nhập
5. auth bảo vệ nên trở về đúng/sai nên các tuyến đường hoặc có thể được kích hoạt hay không

Mã của tôi hiện nay trông như thế này (tôi đang sử dụng RC5 btw.):

Auth Guard

import {Injectable} from "@angular/core"; 
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router"; 
import {Observable, Subject} from "rxjs/Rx"; 
import {AuthService} from "./auth.service"; 

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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { 
    var authenticated = this.authService.isAuthenticated(); 
    var subject = new Subject<boolean>(); 
    authenticated.subscribe(
     (res) => { 
      console.log("onNext guard: "+res); 
      if(!res && state.url !== '/signin') { 
      console.log("redirecting to signin") 
      this.router.navigate(['/signin']); 
      } 
      subject.next(res); 
     }); 
    return subject.asObservable(); 
    } 
} 

Dịch vụ Auth

import {Injectable} from "@angular/core"; 
import {User} from "./user.interface"; 
import {Router} from "@angular/router"; 
import {Http, Response, Headers} from "@angular/http"; 
import {environment} from "../environments/environment"; 
import {Observable, Observer, Subject} from "rxjs/Rx"; 

@Injectable() 
export class AuthService { 
    private authenticatedUser : User; 
    constructor(private router: Router, private http: Http) {} 

    signupUser(user: User) { 
    } 


    logout() { 
    //do logout stuff 
    this.router.navigate(['/signin']); 
    } 

    isAuthenticated() : Observable<boolean> { 
    var subject = new Subject<boolean>(); 
    if (this.authenticatedUser) { 
     subject.next(true); 
    } else { 
     this.http.get(environment.baseUrl + '/user') 
     .map((res : Response) => res.json()) 
     .subscribe(res => { 
      console.log("next: returning true"); 
      this.authenticatedUser = User.ofJson(res); 
      subject.next(true); 
     }, (res) => { 
      console.log("next: returning false"); 
      subject.next(false); 
     }); 
    } 
    return subject.asObservable(); 
    } 
} 

vấn đề là: các bảo vệ không bao giờ cho phép thành phần bộ định tuyến kích hoạt, ngay cả khi tôi đăng nhập.

Cảm ơn sự giúp đỡ!

Answer 1

Thay đổi

return subject.asObservable(); 

để

return subject.asObservable().first(); 

Router đợi cho quan sát để hoàn thành. first() làm cho nó hoàn thành sau sự kiện đầu tiên.