Angular 5中无法访问JSON对象的access_token属性求助

Hey there! Let's walk through why you might be stuck accessing the access_token property from your JSON response in Angular 5, and how to fix it.

Common Issues & Fixes #

1. You're using the old Http module instead of HttpClient

Angular 5 introduced the HttpClient module (from @angular/common/http) which automatically parses JSON responses. If you're still using the deprecated Http module (from @angular/http), you need to manually parse the response body with .json():

Fix with old Http module:

import { Http } from '@angular/http';
import 'rxjs/add/operator/map'; // Don't forget this import!

constructor(private http: Http) {}

fetchToken() {
  this.http.get('your-auth-api-endpoint')
    .map(res => res.json()) // Parse the raw response to JSON
    .subscribe(response => {
      console.log('Access Token:', response.access_token); // Now this works!
    });
}

Better fix: Switch to HttpClient (recommended)

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

fetchToken() {
  this.http.get('your-auth-api-endpoint')
    .subscribe(response => {
      console.log('Access Token:', response.access_token); // No manual parsing needed
    });
}

2. TypeScript type checking is blocking you

If you've stored the response in a variable without defining a proper type, TypeScript might throw an error when trying to access access_token. You can fix this by defining an interface or using type assertion:

Define a typed interface:

// Create an interface to match your response structure
interface AuthToken {
  access_token: string;
  token_type: string;
  expires_in: number;
}

// When fetching or assigning the response:
this.http.get<AuthToken>('your-auth-api-endpoint')
  .subscribe((token: AuthToken) => {
    console.log(token.access_token); // TypeScript recognizes the property
  });

Quick fix with type assertion:
If you don't want to create an interface, you can use as to tell TypeScript the response structure:

const tokenResponse = yourJsonData as { access_token: string };
console.log(tokenResponse.access_token);

3. Double-check your response structure

Make sure the JSON you're receiving is exactly as you expect. Sometimes APIs wrap the token in an extra object (like { data: { access_token: ... } }). You can verify this by logging the full response to the console:

.subscribe(response => {
  console.log('Full Response:', response); // Check if the structure matches your JSON
});

内容的提问来源于stack exchange，提问作者Anderson M. V. Amaral