Angular2 watch for 302 redirect when fetching resource

Question

I have a requirement to pull a few resources from another domain held by my company. I want to pull secured HTML content with GET requests.

When a user is signed out of the application the requested content will return a 302 to the login page.

My attempts to sniff the headers for a 302 haven't returned what I'd hoped for so far. The response returned by my Observable is a 200 (login page).

Here is my sample app.

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

Am I even on the right track?

score 23 · Accepted Answer · answered Apr 27 '16 at 09:28

23

If the server sends a redirect with a 302 status code with the URL to redirect within a Location header, the redirect is automatically handled by the browser, i.e. a request to this URL is executed.

That's why XHR (and the Angular2 wrapper around it, i.e. the Http class) won't see the result of the first request but only the response of the second one.

answered Apr 27 '16 at 09:28

Thierry Templier

198,364
44
396
360

can you explain a bit more...(beginner here) – radio_head Nov 21 '17 at 14:00
So, I cannot control my application flow with a 302 redirect? – Matteo Gaggiano Sep 25 '18 at 16:19
IE11 is interpreting 302 response with empty string as error. Any suggestions on getting HttpService to handle redirects inside IE11 properly? – TerNovi Oct 29 '18 at 22:33
3

This doesn't answer the question at all. The OP was asking how to detect it. – speciesUnknown Dec 04 '18 at 10:03
1

@speciesUnknown It does answer the question because there is no way of detecting the 302 redirect because the browser takes control of the request before our Angular code has a chance to check the response. – Brendan Sluke Nov 04 '20 at 21:08

score 0 · Answer 2 · answered Aug 25 '17 at 05:17

This is my working code for redirecting to ServiceData. Angular2(4) and 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 || {};
}

Angular2 watch for 302 redirect when fetching resource

2 Answers2

Linked