web-dev-qa-db-ja.com

Angular2で401例外をキャッチ

Chromeで不正なURLに接続しようとすると：

zone.js:1274 POST http://localhost:8080/rest/v1/runs 401 (Unauthorized)
core.umd.js:3462 EXCEPTION: Response with status: 401 Unauthorized for URL: http://localhost:8080/rest/v1/runs

私のホームコンポーネントのコードは：

import {Component, OnInit} from '@angular/core';
import {Run} from "../_models/run";
import {Http, Response} from "@angular/http";
import {RunService} from "../_services/run.service";
import {Observable} from "rxjs";

@Component({
    moduleId: module.id,
    templateUrl: 'home.component.html'
})

export class HomeComponent implements OnInit{
    url: "http://localhost:8080/rest/v1/runs"
    username: string;
    runs: Run[];

    constructor(private http: Http, private runService: RunService) {

    }

    ngOnInit(): void {
        this.username = JSON.parse(localStorage.getItem("currentUser")).username;
        this.runService.getRuns()
            .subscribe(runs => {
                this.runs = runs;
            });
    }
}

そして、このコンポーネントはこのサービスを使用します：

import { Injectable } from '@angular/core';
import {Http, Headers, Response, RequestOptions, URLSearchParams} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
import {AuthenticationService} from "./authentication.service";
import {Run} from "../_models/run";

@Injectable()
export class RunService {
    url = "http://localhost:8080/rest/v1/runs";
    private token: string;

    constructor(private http: Http, private authenticationService: AuthenticationService) {

    }

    getRuns(): Observable<Run[]> {
        return this.http.post(this.url, JSON.stringify({ token: this.authenticationService.token }))
            .map((response: Response) => {
                console.log(response.status);
                if (response.status == 401) {
                    console.log("NOT AUTHORIZED");
                }

                let runs = response.json();
                console.log(runs);
                return runs;
            });
    }
}

この401例外をキャッチする正しい方法は何ですか？どこでこれを行うべきですか？コンポーネント内またはサービス内？最終的な目標は、401応答が発生した場合にログインページにリダイレクトすることです。

exceptionangularhttp-status-code-401
9
ManzMoody

ログインページへのルーティングを実行できるコンポーネントで捕捉される可能性のあるRunServiceからエラーをスローすることが最も可能性があります。以下のコードはあなたを助けるでしょう：

RunServiceの場合：

Rxjsからcatch演算子をインポートする必要があります。

import 'rxjs/add/operator/catch';

そして、あなたのgetRuns（）関数は

getRuns(): Observable<Run[]> {
    return this.http.post(this.url, JSON.stringify({ token: this.authenticationService.token }))
        .map((response: Response) => {
            let runs = response.json();
            return runs;
        })
        .catch(e => {
            if (e.status === 401) {
                return Observable.throw('Unauthorized');
            }
            // do any other checking for statuses here
        });

コンポーネントのngOnInitは次のようになります。

ngOnInit(): void {
    this.username = JSON.parse(localStorage.getItem("currentUser")).username;
    this.runService.getRuns()
        .subscribe(runs => {
            this.runs = runs;
        }, (err) => {
            if (err === 'Unauthorized') { this.router.navigateByUrl('/login');
        });
}

明らかに、コードを自分のニーズに合わせて必要に応じて変更する必要がありますが、Httpからエラーをキャッチし、Observableエラーをスローし、エラーコールバックを使用してコンポーネントのエラーを処理するプロセスで問題が解決するはずです。

33
peppermcknight