“对象”类型上不存在属性“令牌” - Angular 8

Question

我正在观看 MEAN Stack - Angular 2 中的平均身份验证应用教程，因为我是 Angular 新手，并且 我正在使用 Angular 8，由于新的一些代码已被弃用 更新。所以我有这段代码，但我不知道如何修复它。

这是我在 Auth.service.ts 中的工作代码

这段代码没有错误

    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){
    localStorage.setItem('id_token', token);
    localStorage.setItem('user', JSON.stringify(user));
    this.authToken = token;
    this.user = user;
  }

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

在我的 login.component.ts 中显示错误

“对象”类型上不存在属性“令牌”

“对象”类型上不存在属性“用户”

“对象”类型上不存在属性“msg”

这是我的 login.component.ts 代码

onLoginSubmit(){
    const user = {
      username: this.username,
      password: this.password
    }

    this.authService.authenticateUser(user).subscribe(data => {
      if(data){
        this.authService.storeUserData(data.token, data.user);
        this.flashMessage.show('You are now logged in', {
          cssClass: 'alert-success',
          timeout: 5000});
        this.router.navigate(['dashboard']);
      } else {
        this.flashMessage.show(data.msg, {
          cssClass: 'alert-danger',
          timeout: 5000});
        this.router.navigate(['login']);
      }
    });
  }

login.components.ts 文件如果我输入了错误的登录凭据，那就是 登录。

 onLoginSubmit(){
    const user = {
      username: this.username,
      password: this.password
    }

    this.authService.authenticateUser(user).subscribe(data => {
      console.log(data);
      if(user){
        this.authService.storeUserData(data.token, data.user);
        this.flashMessage.show('You are now logged in', {
          cssClass: 'alert-success',
          timeout: 5000});
        this.router.navigate(['dashboard']);
      } else {
        this.flashMessage.show(data.msg, {
          cssClass: 'alert-danger',
          timeout: 5000});
        this.router.navigate(['login']);
      }
    });
  }

Answer 1

我认为您在谈论打字稿错误：http.post 返回一个Observable<object>，所以data 是一个object，并且对象中没有属性token、user、msg。

根据您告诉我们的信息，您的authenticate WS 应该会返回：

interface SuccessResponse {
  token: string;
  user: any; // should change any to your user type
}

interface FailureResponse {
  success: false;
  msg: string;
}

type AuthResponse = SuccessResponse | FailureResponse;

authenticateUser(user): Observable<AuthResponse> {
    // header for content-type is not needed
    return this.http.post<AuthResponse>('http://localhost:3000/users/authenticate', user);
}

你可以这样使用它：

 onLoginSubmit() {
    const user = {
      username: this.username,
      password: this.password
    }

    this.authService.authenticateUser(user).subscribe(response => {
      console.log(data);
      if ('token' in response) {
        // response is SuccessResponse
        this.authService.storeUserData(response.token, response.user);
        this.flashMessage.show('You are now logged in', {
          cssClass: 'alert-success',
          timeout: 5000});
        this.router.navigate(['dashboard']);
      } else {
        // response is FailureResponse
        this.flashMessage.show(response.msg, {
          cssClass: 'alert-danger',
          timeout: 5000});
        this.router.navigate(['login']);
      }
    });
  }

这应该适合你。但是，标准是您应该在登录失败时返回错误（例如代码 401），而不是使用success: false 的 OK 状态 (200)。在这种情况下代码会有所不同