Angular2 .subscribe有時不火的router.navigate

Question

我有一個登錄功能：

login(user: UserComponent) { 
let headers = new Headers(); 
headers.append('Content-Type', 'application/json'); 
headers.append("Authorization", "Basic " + btoa(user.username + ":" + user.password)); 
return this._http 
    .get(
    'https://api.xxxxxxxxxxxx.com/rest/auth', 
    { headers } 
) 
    .map(res => res.json()) 
    .subscribe(
    (data) => { 
     this.loggedIn = true; 
     console.log('data '+ this.loggedIn); 
     localStorage.removeItem('auth_token'); 
     localStorage.setItem('auth_token', data.token); 
     console.log(data.token); 
     this._router.navigate(['']); 
    }, 
    (err) => { 
     this.errorMsg = err.json().error_message 
     console.log(this.errorMsg); 
    } 
);} 

isLoggedIn() { 
    if(this.loggedIn){ 
     return true; 
    }else{  
     this._router.navigate(['login']); 
     return false; 
    } 
    } 

，我稱之爲是這樣的：

constructor(private _userService: UserService, private _router: Router) {} 

authUser() { 
    let user = new UserComponent(this.username, this.password); 
    this._userService.login(user); 

}

的CanActivate是這樣這個：

@Injectable() 
export class LoggedInGuard implements CanActivate { 
    constructor(private _userService: UserService) {} 

    canActivate() { 
    console.log(this._userService.isLoggedIn()); 
    return this._userService.isLoggedIn(); 
    } 

} 

更新＃1 我想我找到了問題，但不知道如何解決。我用當前版本更新了上面的代碼。

看起來像問題是當它執行警衛運行之前this.loggedIn被設置爲真的行動....返回false然後......爲什麼？我該如何解決？

謝謝

Answer 1

您登錄功能異步，這就是爲什麼console.log發生您從服務中獲得的數據之前。您需要包裹console.log你登錄函數來查看數據

this._userService.login(user).subscribe(
    (data) =>{ 
    this.data = data 
    console.log(this.data); 
    }, 
(err) => this.errorMsg = err.json().error_message);