web-dev-qa-db-fra.com

Angular2 surveille la redirection 302 lors de l'extraction d'une ressource

J'ai besoin de tirer quelques ressources d'un autre domaine détenu par mon entreprise. Je souhaite extraire du contenu HTML sécurisé avec des requêtes GET.

Lorsqu'un utilisateur est déconnecté de l'application, le contenu demandé renvoie 302 à la page de connexion.

Mes tentatives pour renifler les en-têtes d'un 302 n'ont pas donné les résultats escomptés. La réponse renvoyée par mon observable est un 200 (page de connexion).

Voici mon exemple d'application.

export class MenuComponent implements OnInit {

    private _resourceUrl = "http://localhost:3001/resources/menu";

    constructor(private _http: Http){
    }

    menu: string;

    ngOnInit(): void {
        this.getMenu()
            .subscribe(
                response => {
                    console.log(`Response status: ${response.status}`);

                    this.menu = response.text();
                },
                error => console.log(<any>error));
    }

    getMenu(): Observable<Response>{        
        return this._http.get(this._resourceUrl)
            .map((response: Response) => response)
            .catch(this.handleError);
    }

    private handleError(error: Response){
        console.log(error);
        return Observable.throw(error.json().error || 'Server Error');
    }
}

Suis-je même sur la bonne voie?

9
Dan

Si le serveur envoie une redirection avec un code de statut 302 avec l’URL à rediriger dans un en-tête Location, la redirection est automatiquement gérée par le navigateur, c’est-à-dire qu’une requête est envoyée à cette URL.

C’est pourquoi XHR (et l’encapsuleur Angular2 qui l’entoure, c’est-à-dire la classe Http) ne verra pas le résultat de la première requête mais uniquement la réponse de la seconde.

20
Thierry Templier

Ceci est mon code de travail pour la redirection vers ServiceData. Angular2 (4) et ASP Net Core.

private post(url: string, data?: any) {
    return this.http.post(url, data, { headers: this.headers })
      .map(response => this.extractData(response, true));
}

private extractData(res: Response, mapJson = true) {
    let body: any = res;
    // redirect
    if (body.url.search('ReturnUrl') != -1) {
        let url = new URL(body.url);

        // get patch redirect simple /account/login
        let pathname = url.pathname;

        // get params redirect simple ?ReturnUrl=%2Fapi%2Fitems%2FGetitems
        let search = url.search;

        // 1 navigate with params
        this.router.navigate.navigate([pathname], { queryParams: { returnUrl: search } });

        // OR ...

        // 2 navigate only pathname
        this.router.navigate.navigate([pathname]);
        return {};
    }            

    if (mapJson) {
        body = body.json();
    }
    return body || {};
}
0
dev-siberia