javascript - 使用错误的凭据登录时收到警报

Question

我正在使用用户名和密码以角度在登录页面上进行制作。当我输入错误的凭据时，我收到带有用户名和密码的警报消息。

下面的 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 && (f.userName.dirty || f.userName.touched) }">
                  <div *ngIf="f.userName.invalid && (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 && (f.userPassword.dirty || f.userPassword.touched) }">
                  <div *ngIf="f.userPassword.invalid && (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>

登录.ts

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

正宗服务

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;
    }
  }

请帮我解决这个问题。

截图供参考。

标签： javascripthtmljqueryangular

Answer 1

在你的标题中试试这个：

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