处理 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 只能调用一次.

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

Note that after the component is dismissed, it will not be usable anymore and another one must be created.

这是导致异常的原因.您应该每次在 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 后的运行时错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！