如何在 Post 请求 API 中获取 HttpErrorResponse Angular

Question

抱歉，我是前端开发的新手

我已经在 angular 上进行了系统登录，但是如果令牌未能获得或获得 HttpErrorResponse

，我的系统登录没有 return 错误消息

我想向用户显示密码/用户名错误的错误消息

如果我的 API

中没有用户名和密码，这是响应

api.service.ts

baseUrlAuth = 'http://localhost:8000/api/auth/token/login/'

auth.component.ts


interface TokenObj {
  auth_token: string;
}


 authForm = new FormGroup({
    username: new FormControl(''),
    password: new FormControl(''),
    rememberMe : new FormControl(''),
  });

  headers = new HttpHeaders({
    'Content-Type': 'application/json',
  });

  loginUser(authData) {
    let body = JSON.stringify(authData);
    return this.httpClient.post(this.ApiService.baseUrlAuth, body, {
      headers: this.headers
    },);
  }

  saveForm() {
    this.loginUser(this.authForm.value).subscribe(
      (result: TokenObj) => {
      if (this.authForm.value.rememberMe == true) {
        this.cookieService.set('userToken', result.auth_token)
      }
      sessionStorage.setItem('userSession', result.auth_token);
      window.location.href = '/home';}
      );
  }

auth.component.html

<div class="container">
    <div class="row">
        <div class="col col-8 col-sm-8 col-lg-6 mx-auto my-auto">
            <form [formGroup]="authForm" (ngSubmit)="saveForm()">

                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="email" class="form-control" id="username" placeholder="Enter Username" required
                        formControlName="username">
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
                        else.</small>
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password"
                        formControlName="password" required>
                </div>

                <div class="form-check">
                    <input type="checkbox" formControlName="rememberMe" id="rememberMe" class="form-check-input">
                    <label for="rememberMe" class="form-check-label">Remember Me</label>
                </div>
                
                <div class="text-center">
                    <button type="submit" class="btn btn-primary" style="width: 250px;">Login</button>
                </div>

                <div class="text-center sign-up">
                    <p>Not a Member</p>
                    <a href="">Sign Up Now</a>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

subscribe()

中有一个error()方法

app.component

export class AppComponent {
  name = 'Angular ' + VERSION.major;

  constructor(private testService: TestService) {
    testService.fakeCall().subscribe(
      (data) => { // next() method block
        console.log("Log from next() method");
        console.log(data)
      },
      (error) => { // error() method block
        console.log("Log from error() method");
        console.log(error)
      }
    )
  }
}

test.service

export class TestService {

  fakeCall() {
    return throwError("There is some error occurred...");
  }
}

您可以从这个stackblitz

中查看工作示例

建议参考HTTP interceptors in angular

如何在 Post 请求 API 中获取 HttpErrorResponse Angular

How to Get HttpErrorResponse Angular In Post Request to API

authentication

api

rest

token

angular

如果我的 API

api.service.ts

auth.component.ts

auth.component.html