Я использую Angular и пытаюсь проверить учетные данные пользователя для страницы входа в моем файле service.ts, отправив запрос на бэкэнд. Я хочу дождаться ответа сервера в моем файле component.ts, но не могу этого сделать.

Вот мой код:

Service.ts

check_authentication(mail: string, passcode: string)
{
  const params = new HttpParams().set('id', mail).set('id2', passcode);

  this.http.post('http://localhost:3000/login', this.test, {params, responseType: "text"})
  .subscribe(responseData => {
    if(responseData == 'Authorized')
    {
        this.check = true;

    }
    else
    {
        this.check = false;

    }
  }
  ,error => {
    console.log("Error occurred while trying to login "+ error.message);
  });
}

isAuthenticated() : boolean
{
  return this.check;
}

Компонент.ts

onSubmit()
{
  
  this.auth.check_authentication(this.mail, this.code);

  //this if-else block isn't executing as somehow the response from the server isn't there yet.
  //I want to wait for the response here
  if(this.auth.isAuthenticated() == true)
  {
    console.log("submit button called here");

    this.router.navigateByUrl('/home');
  }
   
  else if(this.auth.isAuthenticated() == false)
  {
    this.unAuthorized = true; //as I am throwing an alert if user login fails
  }

   console.log("Printing this to see if this function is being called correctly"); //this executes 
}

Любая помощь была бы признательна.

1
Package.JSON 10 Фев 2021 в 09:53

1 ответ

Лучший ответ

check_authenticationl является асинхронным, что означает, что значение не готово, прежде чем вы проверите, аутентифицирован ли пользователь или нет. Есть несколько подходов к решению этой проблемы. Один из них - позволить check_authentication вернуть обещание.

В сервисе:

    check_authentication(mail: string, passcode: string)
    {
      const params = new HttpParams().set('id', mail).set('id2', passcode);
      return new Promise((resolve, reject) => { // create a promise that resolves after the api returns a response

      this.http.post('http://localhost:3000/login', this.test, {params, responseType: "text"})
      .subscribe(responseData => {
        if(responseData == 'Authorized') {
            resolve(true);
        } else {
            resolve(false);
        }
      }, error => {
        console.log("Error occurred while trying to login "+ error.message);
        reject();
      });
    })
      
    }

В компоненте

    this.auth.check_authentication(this.mail, this.code).then( isAuth => {
      if(isAuth){

      }else{

      }
    });
2
John 10 Фев 2021 в 07:08