Angular4 Http 처리에 대한 모범 사례 Obserable

Question

C# 및 Angular1 코드 작성 경험이 있지만 Angular2 + 및 RxJs는 새로운 것입니다.

저는 Angular4 로그인 구성 요소를 작성 했으므로 login 메소드의 결과를 observable의 map 함수에 캐싱하여 코드 냄새를 맡은 것처럼 보입니다.

은 내가 LoginComponent가에 로그인을 호출하는 AuthenticationService 있습니다

login(username: string, password: string): Observable<User> { 
return this.http 
    .post('/api/users/login', { username: username, password: password }) 
    .map((response: Response) => { 

    let loginResult = response.json(); 
    this.user = loginResult.user as User 

    localStorage.setItem(tokenStorageName, loginResult.token); 

    return this.user; 
    }) 
    .catch(this.handleError); 

}

이 때문에 지금까지 그 단지를해야 내가 아는지도 기능의 상태를 저장하는 이상한 느낌

번역 기능. 나는 사용자 데이터를 원한다면 다른 서비스 호출을 할 필요가 없도록 로그인 결과에서 돌아온 사용자와 토큰을 캐싱하려고합니다. LoginComponent이 AuthenticationService 또는 UserCache에 SETUSER를 호출하는

login() { 
this.isLoading = true; 
this.authenticationService.login(this.model.username, this.model.password) 
    .subscribe(
    result => { 
    let returnUrl = this.activatedRoute.snapshot.queryParams['returnUrl'] || '/' 
    this.router.navigate([returnUrl]); 
    }, error => { 
    if (error != null && error.code == unauthorizedCode) { 
     this.error = 'Username or password incorrect'; 
    } 
    else { 
     this.error = 'Error logging in'; 
    } 
    this.isLoading = false; 
    }); 

그것은 또한 느낌이 좋지 않습니다 여기

은 로그인 구성 요소의 논리이다.

모범 사례에 대한 조언을주세요. 뭔가를 시도

Answer 1

토드의 ​​모토는 트위터를 통해 좋은 예 주었다 단일 상태 저장소가 정말 유용 곳

https://twitter.com/toddmotto/status/865531009638440961

"이 - 당신은 완료 할 수 귀하 "

Answer 2

는 :

login(username: string, password: string): Observable<User> { 
    let o = this.http 
     .post('/api/users/login', { username: username, password: password}) 
    //uncomment if you have multiple subscribers, otherwise http request is executed multiple times 
     //.share() 
    ; 

    o.subscribe(
     (response: Response) => { 
      this.user = loginResult.user as User; 
      localStorage.setItem(tokenStorageName, loginResult.token); 
     }, 
     (response: Response) => this.handleError(response) 
    ); 

    return o.map(response: Response => response.json()); 
}