如何从服务提供商的共享 HTTP 请求中捕获 401？

Question

我正在使用 Ionic 2 创建一个移动应用程序。 Ionic 2 使用 Angular 2。

我的逻辑很简单。我有一个api 服务，它有get() 和post() 方法用于发送/检索带有身份验证标头的数据，get_no_auth() 和post_no_auth() 用于没有身份验证标头的请求。

这些方法从应用程序特定部分的其他服务调用（user、training_programme 等）。

这一切都很好，但我需要从 API 中捕获 401 HTTP 状态代码并采取适当的措施。

我的api.js 服务：

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Storage } from '@ionic/storage';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/catch';

@Injectable()
export class Api {
  base_url: string = 'https://*****.com';
  url: string = this.base_url + '/api/v1';
  authurl: string = this.base_url + '/oauth/token';
  grant_type: string = 'password';
  client_id: string = '1';
  client_secret: string = '*****';
  access_token: string;

  constructor(
    public http: Http, 
    private storage: Storage) {

    // Grab access token and store it
    storage.get('access_token').then((val) => {
      this.access_token = val;
    });
  }

  // Performs a GET request with auth headers
  get(endpoint: string, params?: any) {
    if(!params) {
      params = [];
    }
    params['grant_type'] = this.grant_type;
    params['client_id'] = this.client_id;
    params['client_secret'] = this.client_secret;

    let headers: Headers = this.getHeaders();

    return this.getApiToken().flatMap(data => {

      headers.append('Authorization', 'Bearer ' + data);

      let options = new RequestOptions({ headers: headers });

      // Support easy query params for GET requests
      if (params) {
        let p = new URLSearchParams();
        for (let k in params) {
          p.set(k, params[k]);
        }
        // Set the search field if we have params and don't already have
        // a search field set in options.
        options.search = !options.search && p || options.search;
      } 

      return this.http.get(this.url + '/' + endpoint, options);
    }).share();
  }
}

我通过特定于每个实体的提供程序来调用它。所以对于培训计划：

  get_programmes() {
    let seq = this.api.get('training-programmes');

    seq
      .subscribe();

    return seq;
  }

我从我的控制器中调用它：

this.trainingProgramme.get_programmes()
    .map(res => res.json())
    .subscribe((res) => {

    loader.dismiss();
    this.currentItems = res.training_programmes;

}, (err) => {
    loader.dismiss();
});

我宁愿不在我的控制器中处理 401，因为它会导致我的应用程序中出现重复的代码。相反，我想在api.js 服务文件中捕获任何 401 状态代码。

我该怎么做？我尝试在http.get 中添加catch 语句，但这会导致错误。

Argument of type '(e: any) => void' is not assignable to parameter of type '(err: any, caught: Observable<Response>) => ObservableInput<{}>'. Type 'void' is not assignable to type 'ObservableInput<{}>'.

Answer 1

处理错误的最简单方法是使用您尝试过的 catch 语句。为了让它工作，你必须从你的错误处理程序中返回一个 observable（错误消息告诉你你缺少一个 return 语句）。

private handleError(error: any) {
    let errMsg: string;
    if (error.status === 401) {
        errMsg = 'Got error 401';
    }
    else {
        errMsg = 'Got some other error';
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
} 

Answer 2

如果它是一个承诺，它看起来像这样：

this.UserService.insert(user).then(
            (response) => {
                this.nav.pop();
            },
            (err) => {
                if (err.status == 400) {
                    let body = JSON.parse(err._body);
                    if (body.message) {
                        this.presentAlert(err.statusText, body.message);
                    }
                    else {
                        this.presentAlert(err.statusText, 'Something went wrong: Failed to save User to database.');
                    }
                }
                else {
                    this.presentAlert(err.statusText, 'Something went wrong: Failed to save User to database.');
                }
            });