web-dev-qa-db-fra.com

Catch 401 Exception dans Angular2

Lorsque j'essaie de me connecter à une URL non autorisée que j'obtiens dans Chrome:

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

Le code de mon composant Home est:

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;
            });
    }
}

Et ce composant utilise ce service:

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;
            });
    }
}

Quelle est la bonne façon d'attraper cette exception 401 et où dois-je le faire? Dans le composant ou dans le service? L'objectif final est de rediriger vers la page de connexion si une réponse 401 se produit.

exceptionangularhttp-status-code-401
9
ManzMoody

Vous souhaiterez probablement renvoyer une erreur de votre RunService qui peut être interceptée dans votre composant et qui peut effectuer le routage vers la page de connexion. Le code ci-dessous devrait vous aider:

Dans RunService:

Besoin d'importer l'opérateur catch depuis rxjs:

import 'rxjs/add/operator/catch';

Et votre fonction getRuns () devrait changer en

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
        });

puis le ngOnInit dans le composant sera:

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');
        });
}

Évidemment, vous voudrez répondre au code à vos propres besoins et le modifier si nécessaire, mais le processus de capture de l'erreur sur Http, de lancement d'une erreur observable et d'utilisation du rappel err pour gérer l'erreur dans votre composant devrait résoudre votre problème. .

33
peppermcknight