2017-08-10 5 views
0
import { Injectable } from '@angular/core'; 
import { Http, ConnectionBackend, Headers, RequestOptions, Request, Response, RequestOptionsArgs } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/throw'; 

@Injectable() 
export class SecureHttpService extends Http { 

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { 
    super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    // return super.request(url, options); 
    return super.request(url, options).catch(this.catchErrors()); 
    } 

    private catchErrors() { 
    return (res: Response) => { 
     if (res.status === 401 || res.status === 403) { 
      //nav.push(loginPage); I want to do something like this if status is 401 
     debugger; 
     } 
     return Observable.throw(res); 
    }; 
    } 

401エラーステータスがある場合はログインページに移動しようとしていますが、イオンはサービス内でサービスを使用できません。これはどのように達成できますか?Ionic 2のインターセプタを使用してステータス401を取得する際にログインページに移動します。

app.module.ts: - あなたのapp.component.tsまたはそのことについてあなたの最初のページで

providers: [ 
{ 
    provide: Http, 
    useFactory: (backend:XHRBackend, defaultOptions:RequestOptions) => { 
     return new SecureHttpService(backend, defaultOptions); 
    }, 
    deps: [XHRBackend, RequestOptions] 
}, 
StatusBar, 
SplashScreen, 
{provide: ErrorHandler, useClass: IonicErrorHandler} 
] 

答えて

0

import { NavController, Events } from 'ionic-angular'; 

    constructor(navCtrl: NavController, events: Events) { 
     this.events.subscribe('http:forbidden', error => { 
      this.navCtrl.push(LoginPage, {errorMessage: error}); 
     }); 
    } 

今、あなたは自分のサービスから発することができる:

import { Injectable } from '@angular/core'; 
import { Http, ConnectionBackend, Headers, RequestOptions, Request, Response, RequestOptionsArgs } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

import { Events } from 'ionic-angular'; 

import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/throw'; 

@Injectable() 
export class SecureHttpService extends Http { 

    constructor(public events: Events, backend: ConnectionBackend, defaultOptions: RequestOptions) { 
    super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    // return super.request(url, options); 
    return super.request(url, options).catch(this.catchErrors()); 
    } 

    private catchErrors() { 
    return (res: Response) => { 
     if (res.status === 401 || res.status === 403) { 
      // will trigger the event defined earlier which did have access to the NavController 
      this.events.publish('http:forbidden', "Something went wrong."); 
     debugger; 
     } 
     return Observable.throw(res); 
    }; 
    } 
+0

私はすでにこれを行っています、私の迎撃は実行されています。私がしたいのは、エラーステータス401のログインページに移動することですが、自分のサービス内でnavcontrollerを使用することができないので、ログインページに設定するにはどうすればいいですか? –

+0

現在、私の電話には見えますが、 'は、あなたがあなたのサービスから放り出し、feでそのイベントを聞くことができますあなたがNavController – Ivaro18

+0

を使うことができるapp.component(それは常に実行されるので)イベントサービスも動作していません、それはundefinedの 'publish'を読むことができません。 { return(res:Response)=> { if(res.status === 401 || res.status === 403){ this.ev.publish( 'setRoot'、this。名); // this.navCtrl.push(HomePage); } return Observable.throw(res); }; } ' –