Angular login function in service with HTTPClient

Question

since i've upgraded to Angular 5 and started using httpclient. I am unable to get just a simple login function to work. Can someone help me out?

auth service:

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));
  }

and the login page controller:

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;
          }
        });
  }

This gives me error(s):

ERROR in src/app/services/auth.service.ts(104,36): error TS2339: Property 'token' does not exist on type 'Object'. src/app/services/auth.service.ts(105,52): error TS2339: Property 'token' does not exist on type 'Object'.

Kirk Larkin · Accepted Answer · 2017-12-13 16:51:52Z

1

With http, the response body was typed as any, which meant you could use whatever properties you needed without TypeScript complaining. This changed with HttpClient, whereby it defaults to just a standard Object, which upsets TypeScript as a basic object does not have a token property.

You have at least 3 basic options here:

Change from response.token to response['token'].
Use this.http.post<any> and continue to access response.token.
Create e.g. a new interface, such as the following:
```
interface AuthenticateResponse {
    token: string
}
```
With this, you can then use this.http.post<AuthenticateResponse> and have the type-safety offered by TypeScript.

You can read more about this in Typechecking the response from the docs.

answered Dec 13, 2017 at 16:51

Kirk Larkin

94.4k17 gold badges235 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular login function in service with HTTPClient

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related