Javascript 如何使用新的HttpClient访问Angular 4.3中的json密钥？

我正在尝试从Angular 4.0迁移到4.3，以便逐步升级到Angular 5或6

我开发了一个简单的身份验证，对每个请求使用

jwt

。

jwt

存储在本地存储器中

我只知道4.3版本现在使用的

HttpClientModule

将被声明为

app.module.ts

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

我正在使用服务进行身份验证、注册用户和加载令牌

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

我在login.component.ts文件中收到上面的错误提示

login.component.ts（43,15）：类型上不存在属性“success” “对象”

我试图在控制台中打印

数据

，我看到的是：

{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"}

您知道如何从上面的console.log访问

数据

我想在login.component.ts中像这样使用

数据

：

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

任何想法都值得赞赏。谢谢

---

注意

：如果我在app.module.ts中使用Angular 4.0--

HttpModule

和

Http

对象

，我不会遇到上述错误。新的

HttpClientModule

希望您为Http调用提供一个

返回类型/接口

。没有指定

类型

的任何调用都将强制转换为

对象

。这意味着，要解决您的问题，您可以采用以下方法之一，首选选项3（最佳实践）

提供

any

类型，将此行从

返回此.http.post（…）

更改为

返回此.http.post（…）

提供

any

类型，将此行从

this.authService.authenticateUser（用户）。订阅（数据=>…

到

this.authService.authenticateUser（用户）。订阅（数据：任意=>…

）

Strong键入它。例如，创建一个接口并使用它。

接口数据{success:boolean；token:string；user:any；}

。将此行从

返回this.http.post（…）

更改为

返回this.http.post（…）

---

将

.subscribe（数据=>{

更改为

.subscribe（数据：任意=>{

或者，您可以将

authenticateUser（用户）

更改为

authenticateUser（用户）：可观察的

尝试：订阅（数据=>{if（数据）{if（数据.success）{}}@user184994 thanksf或快速响应，但没有运气。@PrashantPimpale错误仍然是相同的。。有相同的错误吗？您介意用您尝试过的更新问题吗，因为这样可以通过删除该值的类型检查来防止该错误谢谢快速响应。如果我继续使用选项3，我应该在哪里创建接口In login.component文件还是auth.service.ts文件？这取决于您的项目结构。通常，在我的项目中，我会设置一个文件夹来保存所有接口和类ts文件。将该文件夹命名为

models

（如在数据模型中）或

interfaces

。这取决于您。：）我明白了。谢谢@Chybie您太棒了。