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 /アプリ/サービス/ AUTHで

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：プロパティ 'token'がタイプ 'Object'に存在しません。 src/app/services/auth.service.ts（105,52）：エラーTS2339：プロパティ 'token'がタイプ 'Object'に存在しません。 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のドキュメントを参照してください。