Angular ошибка входа в систему на стороне сервера в компоненте?

Question

У меня есть код для входа на сервер. Поэтому я использую HTTP-клиент angular и сервис авторизации. Если я отправляю неверные данные на сервер, я получаю ожидаемый ответ от сервера, но выполнение должно где-то остановиться из-за внутренних элементов angular.

Регистрируется следующий вывод консоли:

post data=login (in auth.service.ts)

ERROR 
Object { headers: {…}, status: 401, statusText: "Unauthorized", url: "http://localhost/login", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:3000/login: 401 Unauthorized", error: {…} }
(in core.js:4002)

​

Может кто-нибудь объяснить, почему?

Спасибо.

в обслуживании

login(loginUrl: any, body: { pass: string }) {
  console.log('post data=login');
  return this.http.post(loginUrl, body, httpOptions);
}

в компоненте

login(): void {
    this.authService.login(loginUrl, data).subscribe((serverLoginResponse: any) => {

       // successful log in, continue to do stuff.

      }, (serverLoginError: any) => {
        console.log('error in subscribe err');
        console.log(serverLoginError.statusText, serverLoginError.status);
        if (serverLoginError.status === 401) {
          this.loginForm.controls['password'].setErrors({invalid: true});
        }
      });
     });
  }

в шаблоне

<input #passwordField id="password" class="form-control" type="password" formControlName="password" required>
<div [hidden]="!loginForm.controls['password'].hasError('invalid')" class="alert alert-danger">
   There is no user account matching the entered data! Try again.
</div>

Answer 1

Прежде всего, следуя руководству Angular Отправляя POST-запрос с помощью встроенного модуля HttpClient, он инструктируется передать catchError с помощью обработчика ошибок. Попробуйте проверить, работает ли это.

Кроме того, исходя из моего личного опыта, я бы порекомендовал инкапсуляцию модуля HttpClient в объект типа Promise. Например:

login(url: string, data: { pass: string }) {
    return new Promise((resolve, reject) => {
        this.http.post(url, data, options || {})
            .subscribe(
                response => resolve(response),
                err => reject(err)
            );
    });
}

Тогда ваша функция компонента будет выглядеть так:

login() {
    this.authService.login(loginUrl, data)
        .then((serverLoginResponse: any) => {
            console.log('Request successful, check login results.');
        })
        .catch((serverLoginError: any) => {
            console.error('error in subscribe err');
            // I would first examine the error response
            console.log(serverLoginError);
        });
    });
}