如何使用新的HttpClient访问Angular 4.3中的json键？

Question

I am trying to migrate from Angular 4.0 to 4.3 so I can upgrade step by step to Angular 5 or 6.

I developed a simple authentication that uses jwt for every request. The jwt is stored in a local storage.

I just knew that 4.3 version now uses HttpClientModule that will be declared to

app.module.ts

import { HttpClientModule } from '@angular/common/http';
imports: [
HttpClientModule,
]

I am using a service for my authentication, registering user and for loading the token.

auth.service.ts

import { Injectable } from '@angular/core';
//import { Headers } from '@angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {

  authToken: any; // class property so we can access it anywhere
  user: any;

  constructor(private http:HttpClient) { }

  authenticateUser(user) {
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');
    return this.http.post('http://localhost:3000/users/authenticate', user, {headers: headers})
  }

  storeUserData(token, user) {
    // code for storing user data
  }

  logout() {
    this.authToken = null;
    this.user = null;
    localStorage.clear();
  }
}

login.component.ts

import { AuthService } from 'app/services/auth.service';

@Component({
})
export class LoginComponent implements OnInit {

  username: String;
  password: String;

  constructor(
    private _flashMessagesService: FlashMessagesService,
    private authService: AuthService,
    private router: Router
  ) { }

  ngOnInit() {
  }

  onLoginSubmit() {

    const user = { 
      username: this.username,
      password: this.password
    }

    this.authService.authenticateUser(user).subscribe(data => {
      // console.log(data);

      if(data.success) {
        this.authService.storeUserData(data.token, data.user);
        this.router.navigate(['admin']); //redirect
      } else {
        this.router.navigate(['login']); //redirect
      }
    });
  }
}

I am prompted with an error above in login.component.ts file.

login.component.ts (43,15): Property 'success' does not exist on type 'Object'.

I tried to print data in console and this is what I see:

{success: true, token: "JWT dlskdlskdlskdlsdklgfdg;kfd;gkd;432ks;dfks;fks;fkds;f", user: {…}}
success: true
token:"JWT dlskdlskdlskdlsdklgfdg;kfd;gkd;432ks;dfks;fks;fkds;f"
user:{id: "95430590435934fkdlkfldskfds", name: "Carlo K", username: "carlok", email: "carlok@gmail.com"}

Do you know how can I access data from the console.log above?

I want to use data like this in login.component.ts:

if(data.success) {
// do code
}

Any idea is appreciated. Thanks

Note : I don't encounter an error above if i use the Angular 4.0 -- HttpModule in app.module.ts and the Http Object

Answer 1

The new HttpClientModule would prefer you to provide a return type / interface for your http call. Any call that do not have type specify, will be cast to Object . That mean, to solve your issue, you can either of the below approach, option 3 preferred (best practise).

1. Provide any type, change this line from return this.http.post(...) to return this.http.post<any>(...) .

2. Provide any type, change this line from this.authService.authenticateUser(user).subscribe(data => ... to this.authService.authenticateUser(user).subscribe(data: any => ... .

3. Strong type it. Eg. Create an interface and use it. interface Data { success: boolean; token: string; user: any; } interface Data { success: boolean; token: string; user: any; } . Change this line from return this.http.post(...) to return this.http.post<any>(...) .