Функция углового входа в систему с HTTPClient

Question

С тех пор как я обновился до Angular 5 и начал использовать httpclient. Я не могу заставить работать простую функцию входа в систему. Кто-нибудь может мне помочь?

аутентификационный сервис:

login(email: string, password: string): Observable<boolean> {
    return this.http.post(environment.api_url + '/authenticate', {email: email, password: password})
      .map(response => {
          if (response && response.token) {
            localStorage.setItem('token', response.token);
            return true;
          } else {
            return false;
          }
        }
      )
      .catch(err => Observable.of(false));
  }

и контроллер страницы входа в систему:

login() {
    this.loading = true;
    this.auth.login(this.credentials.email, this.credentials.password)
      .subscribe(
        data => {
          if (data) {
            this.router.navigate([this.returnUrl]);
          }
        },
        data => {
          this.loading = false;
          if (data.error && data.error.message) {
            this.loginError = data.error.message;
          }
        });
  }

Это дает мне ошибку (ы):

ОШИБКА в файле src/app/services/auth.service.ts(104,36): ошибка TS2339: свойство "токен" не существует для типа "Объект". src/app/services/auth.service.ts(105,52): ошибка TS2339: свойство 'token' не существует для типа 'Object'.

Answer 1

С httpтело ответа было набрано как anyЭто означает, что вы можете использовать любые свойства, которые вам нужны, без жалоб TypeScript. Это изменилось с HttpClient, в результате чего по умолчанию это просто стандарт Object, который расстраивает TypeScript как базовый объект, не имеет token имущество.

У вас есть как минимум 3 основных варианта:

1. Меняться от response.token в response['token'],
2. использование this.http.post<any> и продолжать доступ response.token,

3. Создайте, например, новый интерфейс, такой как следующий:

   interface AuthenticateResponse {
       token: string
   }
   

   С этим вы можете использовать this.http.post<AuthenticateResponse> и иметь безопасность типов, предлагаемую TypeScript.

Вы можете прочитать больше об этом в Typechecking ответ от документов.