处理 400 后的运行时错误

问题描述

场景:

用户名和密码使用 WebApi 2 令牌身份验证进行身份验证.如果凭据正确，则返回令牌.但是，如果凭据不正确，则会返回 400 bad request.在我的 Ionic 2 项目中，如果我得到响应，我会导航到下一页.如果我收到错误，我会显示我的自定义错误消息.

The username and password is authenticated using WebApi 2 token authentication. If the credentials are correct, then token is returned. But, if the credentials are incorrect, 400 bad request is returned. In my Ionic 2 project, if I get the response, I navigate to the next page. If I get the error, I show my custom error message.

问题:

我面临的问题是，如果我第一次输入错误的凭据，则会显示自定义错误消息.如果我再次输入错误的凭据，自定义错误消息将与离子错误消息一起显示.

The issue I'm facing is, if I enter the wrong credentials for the first time, the custom error message is shown. If I enter wrong credentials again, the custom error message is shown along with the ionic error message.

这是我的代码:

login.ts

  doLogin() {
    if (this.Username !== undefined && this.Password !== undefined) {
      this.loading.present();
      this.authSrv.login(this.Username, this.Password).subscribe(data => {
        this.navCtrl.setRoot('HomePage');
        this.loading.dismiss();
      }, (err) => {
        this.errorMsg("Invalid Username/Password !" + err);
        this.loading.dismiss();
      });
    }
    else
      this.errorMsg("Please enter Username/Password");
  }

auth-service.ts

auth-service.ts

  login(username, password) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', username);
    urlSearchParams.append('password', password);
    urlSearchParams.append('grant_type', 'password');
    let body = urlSearchParams.toString()
    return this.http.post('http://' + this._api + '/postoken', body, { headers: headers }
    )
      .map(res => res.json())
      .map((res) => {
        if (res !== null) {
          localStorage.setItem('acess_token', res["access_token"]);
          localStorage.setItem('access_type', res["access_type"]);
          localStorage.setItem('expires_in', res["expires_in"]);
          this.loggedIn = true;
        }
        return res;
      });
  }

截图:

错误

任何建议都会有所帮助.

Any advice would be helpful.

推荐答案

LoadingController 只能调用一次.

请注意，组件关闭后，将不再可用，必须创建另一个组件.

这是导致异常的原因.您应该每次在 doLogin 中创建新的加载.

This is causing the exception.You should create new loading everytime in doLogin.

doLogin() {
    if (this.Username !== undefined && this.Password !== undefined) {
      this.loading = this.loadingCtrl.create({ //create here
    content: 'Please wait...'
     });
      this.loading.present();
      this.authSrv.login(this.Username, this.Password).subscribe(data => {
        this.navCtrl.setRoot('HomePage');
        this.loading.dismiss();
      }, (err) => {
        this.errorMsg("Invalid Username/Password !" + err);
        this.loading.dismiss();
      });
    }
    else
      this.errorMsg("Please enter Username/Password");
  }

这篇关于处理 400 后的运行时错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！