Блог

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

ниже HTML-код:

 <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">

                <div class="alert alert-danger" role="alert" *ngIf="authenticService.loginFailed">
                  <span style="padding-right: 5px;"><i class="fas fa-exclamation-triangle"></i></span><span>Failed to
                    login!</span>
                </div>

                <div class="form-group">
                  <input type="text" class="form-control" id="txt-icon" placeholder="Username" autocomplete="off"
                    formControlName="userName"
                    [ngClass]="{ 'is-invalid': f.userName.invalid amp;amp; (f.userName.dirty || f.userName.touched) }">
                  <div *ngIf="f.userName.invalid amp;amp; (f.userName.dirty || f.userName.touched)" class="invalid-feedback">
                    <div *ngIf="f.userName.errors.required">Username is required</div>
                  </div>
                </div>

                <div class="form-group">
                  <input type="password" class="form-control" id="psw-icon" placeholder="********" autocomplete="off"
                    formControlName="userPassword"
                    [ngClass]="{ 'is-invalid': f.userPassword.invalid amp;amp; (f.userPassword.dirty || f.userPassword.touched) }">
                  <div *ngIf="f.userPassword.invalid amp;amp; (f.userPassword.dirty || f.userPassword.touched)"
                    class="invalid-feedback">
                    <div *ngIf="f.userPassword.errors.required">Password is required</div>
                  </div>
                </div>

                <div class="form-group" style="margin-top: 50px;">
                  <button type="submit" class="btn btn-primary btn-lg btn-login">Login</button>
                </div>
              </form>
  

login.ts

 onSubmit() {
    this.authenticService.login(this.loginForm.value.userName, this.loginForm.value.userPassword)
  }
  

AuthenticService

 login(uname: string, pwd: string) {
    try {
      const userAndPasswordBase24 = btoa(uname   ':'   pwd);

      localStorage.setItem('authKey', userAndPasswordBase24);

      //create authorized header
      const headers = new HttpHeaders({ "Authorization" : 'Basic '   userAndPasswordBase24, "Content-Type": "application/json"});
      this.showLoader = true;
      this.showError = false;
      this.loginFailed = false;
      this.checkLoginUser(headers).subscribe(
        (user) => {
          if (user) {
            this.isLogin = true;
            this.showLoader = false;
            this.showError = false;
          }
        },
        (error) => {
          this.showLoader = false;
          this.showError = true;
        }
      );
    } catch (error) {
      this.showLoader = false;
      this.loginFailed = true;
    }
  }
  

пожалуйста, помогите мне, как это решить.

скриншот для справки.

Попробуйте это в своем заголовке:

 headers = headers.append("X-Requested-With", "XMLHttpRequest");