尽管在角度 2 中发现错误，但仍收到 400 Bad Request

Question

我设计了一个登录页面，当我输入正确的登录名和密码时登录成功，而当我输入正确的用户名或密码时登录不会发生。但是，我收到此错误：

POST http://localhost:3003/login/authenticate 400（错误请求）

ERROR HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "Bad Request", url: "http://localhost:3003/login/authenticate", ok: false, ...}

一切正常，但是我在控制台中收到错误消息。像这样：

我希望 400 bad request 错误不会出现在控制台中。该怎么做？

login.component.ts

login(data) {

    console.log("Inside Login");

    this.authenticateObj = {
      username: data.username,
      password: data.password
    }


    this.http.post("http://localhost:3003/login/authenticate", 
      this.authenticateObj)
      .map(Response => Response)
        .catch((err) => {
          console.log("err =", err)
         alert('Login Failed. Username or Password 
       is incorrect');
          return Observable.throw(err);
      })
      .subscribe((res: Response) => {
        console.log("Inside login authenticate subscribe");

        this.info = res;
        if (this.info.message == 'Login Successful.') {


          console.log("test after login = ", this.info);


          if (localStorage.getItem('username') && 
          localStorage.getItem('token')) {
             alert('Login Successful');
            this.router.navigate(['/file-upload/wsdl']);
          } else {
            this.notification.Error('Unauthorized');
          }
        }
        if (this.info.message == 'error') {
          alert('Login Failed');
        }
        else if (this.info.status == 400) {
          alert('Login Failed');
        }
      })


  }

login.controller.js

function authenticateUser(req, res, next) {

console.log("Inside authenticateUser = ", req.body)

    LoginService.authenticate(req,req.body)
        .then(function (token) {

            if (token) {
                res.setHeader("authorization",token.token);
                res.send({
                  message: 'Login Successful.',   

                    response: token
                });
            } else if(res.message == 'Username or Password is 
            incorrect'){ 

                res.status(401).send({
                    message: 'Unauthorized. '
                });
            }
            else { 
                console.log("inside controller, else res.status-400");  
                res.status(400).send({
                    message: 'Username or password is incorrect'
                });
            }
        })
        .catch(function (err) {
            console.log("inside controller, catch res.status 400")
            // res.status(400).send(err);

            res.status(400).send({
                message: 'Username or password is incorrect'
            });

        });
}

Answer 1

IMO 错误请求是您的服务器对错误的用户名/密码组合的错误响应。您可以根据自己的要求返回“401”或“200”。

现在，如果您不希望错误出现在控制台中，请在您的 subscribe() 中添加错误回调。

this.http.post("http://localhost:3003/login/authenticate", this.authenticateObj)
    ...
    // rest of the code
    .subscribe((res: Response) => {
       // your code
    }, (error) => {
        // handle the error here, show some alerts, warnings, etc
        console.log(error)
    })

Answer 2

为了正确处理来自服务器的错误，您必须在 Observable 从 Rxjs 返回的 subcribe() 方法中捕获它们：

this.http.post("http://localhost:3003/login/authenticate", this.authenticateObj)
    .subscribe(
        (res: Response) => {
            // code when no error...
        }, 
        err => {
            // error handling...
        },
        () => {
            // finally...
        }
    );