Свойство 'token' не существует для типа 'Object' - Angular 8 - PullRequest
Новая
       86

Свойство 'token' не существует для типа 'Object' - Angular 8

0 голосов
/ 10 июля 2020

Я смотрю MEAN Stack - Mean Auth App Tutorial в 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 есть ошибка, показывающая

Свойство 'token' не существует для типа 'Object

Свойство 'user' не существует для типа 'Object

Свойство' msg 'не существует для типа' Object

Это мой код 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']);
      }
    });
  }

1 Ответ

0 голосов
/ 11 июля 2020

Я думаю, вы говорите об ошибке машинописного текста: 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), а не статус OK (200) с success: false. В этом случае код будет другим

...