Property 'token' does not exist on type 'Promise'

Question

I want to process a token. But get the message:

Property 'token' does not exist on type 'Promise '

I have the following code. I get a json with the property token. Incidentally, I am guided by a tutorial that uses Angular 2. I already tried it without ['token']. But without success. I also had an interface for the post, but I did not use it to eliminate errors. It also does not work with the interface.

Here is my code:

signin(email: string, password: string) {
    return this.http.post<any>('http://127.0.0.1:8000/api/userLogin',
      { email: email, password: password },
    this.httpOptions).map((response: Response) => {
      const token =  response.json()['token'];
      const base64Url = token.split('.')[1];
      const base64 = base64Url.replace('-', '+').replace('_', '/');
      return JSON.parse(window.atob(base64));
    });

  }

The Tutorial:

https://www.youtube.com/watch?v=pT9_FngJuzY&t=321s

By the way, in this case I use laravel / passport.

success:
{token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjllOW…lsJiIWVmiiNY1Ft02MSWGS-Thx7_warYrUucP8bPHHnyMCfnU"}

where did you called and subscribe signin? did you tried ```response.json().token;``` ? — Fateme Fazli, May 15 '18 at 11:42
@Helge, is `success` included in response? is response from API is like this -> `success: {token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjllOW…lsJiIWVmiiNY1Ft02MSWGS-Thx7_warYrUucP8bPHHnyMCfnU"}` ? — Basavaraj Bhusani, May 15 '18 at 11:42
so much questions in 10 minutes, you are greate :D first success is in the response. The API Response is the same with Postman. I'll try response.json().token and response.json().success.token but I get the same error: Property 'success' does not exist on type 'Promise'. my signIn: onSignIn() { this.authService.signin(this.email, this.password) .subscribe( resp => console.log(resp) ); } — Helge, May 15 '18 at 11:53

score 1 · Answer 1 · answered Sep 01 '18 at 08:05

Why don't you use Serializable class.

This is my solution for this problem by referring from: Angular2 HTTP GET - Cast response into full object

export class MdfResponse {
  public message?: string;
  public token?: string;

  constructor() {}

  fromJSON(json) {
    for (var propName in json)
       this[propName] = json[propName];
    return this;
  }
}

When you call login function

signIn(user: User) { const body = JSON.stringify(user);
      headers: new HttpHeaders({"Content-Type": "application/json"})
      return this.http.post("http://localhost:3000/users/login", body, httpOption)

     .pipe(map((response) => {
          let test = new AIPResponse().fromJSON(response);
          localStorage.setItem("token", test.token);
          localStorage.setItem("userId", test.message);
  }))
     .pipe(catchError((error) => throwError(error)));
  }

Hope for this help!!!

Property 'token' does not exist on type 'Promise'

1 Answers1