HTTPClient와 서비스중인 각도 로그인 기능

Question

저는 Angular 5로 업그레이드하고 httpclient를 사용하기 시작했습니다. 간단한 로그인 기능만으로는 작동하지 않습니다. 누군가 나를 도울 수 있습니까?

인증 서비스 :

login(email: string, password: string): Observable<boolean> { 
    return this.http.post(environment.api_url + '/authenticate', {email: email, password: password}) 
     .map(response => { 
      if (response && response.token) { 
      localStorage.setItem('token', response.token); 
      return true; 
      } else { 
      return false; 
      } 
     } 
    ) 
     .catch(err => Observable.of(false)); 
    } 

및 로그인 페이지 컨트롤러 : SRC/응용 프로그램/서비스/인증에

ERROR :이 나에게 오류 (들)을 제공

login() { 
    this.loading = true; 
    this.auth.login(this.credentials.email, this.credentials.password) 
     .subscribe(
     data => { 
      if (data) { 
      this.router.navigate([this.returnUrl]); 
      } 
     }, 
     data => { 
      this.loading = false; 
      if (data.error && data.error.message) { 
      this.loginError = data.error.message; 
      } 
     }); 
    } 

.service.ts (104,36) : 오류 TS2339 : 'Object'유형의 'token'특성이 없습니다. src/app/services/auth.service.ts (105,52) : 오류 TS2339 : 'Object'유형의 'token'특성이 없습니다. http와

Answer 1

는 응답 본문은 당신이 타이프 라이터 불평없이 필요한 어떤 속성을 사용할 수있는 의미있는 any로 입력했다. 이 값은 HttpClient으로 변경되었습니다. 기본값은 Object이며, 기본 객체 인 TypeScript에는 token 속성이 없습니다. response.token에서 response['token']에

1. 변경 :

   은 현재 최소 3 개 기본 옵션이 있습니다.

2. this.http.post<any>을 사용하고 response.token에 계속 액세스하십시오.

3. 예 : 다음과 같은 새로운 인터페이스 :이

   interface AuthenticateResponse { 
       token: string 
   } 
   

   , 당신은 다음 this.http.post<AuthenticateResponse>을 사용 타이프가 제공하는 형식 안전성을 가질 수 있습니다.

자세한 내용은 Typechecking the response에서 확인할 수 있습니다.