angular - how to handle redirect

Question

I use spring security, which redirects unauthenticated users to a login page.

So when an unauthenticated angular client sends a GET request to an endpoint (expecting JSON), it receives the HTML content of the login page, and the JSON parser fails (Angular2 watch for 302 redirect when fetching resource)

const httpObservable = this.http.get(urlThatWillRedirect).subscribe(data => ...) // JSON parser will fail

How can I handle redirects in Angular?

score 10 · Answer 1 · answered Sep 12 '18 at 08:32

The correct solution is to change the server side code to not return 302 status codes because browser kicks in the redirect before Angular (or any SPA for that matter) can do anything about it. Usually, you want to return 401/403s for this very purpose.

If this is not possible, the only alternative is to implement a hackish solution to somehow recognize that the response is indeed a redirect and handle it appropriately by using HttpInterceptors. Here's an equivalent example in AngularJS.

In Angular 2+, you could probably follow something like this to check if the response is a redirected page:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req)
      .do(event => {
        if (event instanceof HttpResponseBase) {
          const response = event as HttpResponseBase;
          if (response && response.ok && response.url && response.url.toLowerCase().indexOf(this.logoPartialUrl) >= 0) {
            // Modify this portion appropriately to match your redirect page
            const queryStringIndex = response.url.indexOf('?');
            const loginUrl = queryStringIndex && queryStringIndex > 0 ? response.url.substring(0, queryStringIndex) : response.url;
            console.log('User logout detected, redirecting to login page: %s', loginUrl);
            window.location.href = loginUrl;
          }
        }
      });

score 2 · Answer 2 · answered Sep 12 '18 at 08:22

It's not really clean and I would recommend to handle routing and states using Router and Guards. But if JSON parser fails (and this is definition for not logged in you maybe can handle the redirect on client side using the error handler.

const httpObservable = this.http
                                .get(urlThatWillRedirect)
                                .subscribe(
                                  (data) => {//handle data},
                                  (error) => {// redirect to login page}          
                                );

Would be helpful to get an explanation of using Router and Guards. — Alan Baljeu, Nov 16 '21 at 15:43

Ganesh · Answer 3 · 2020-01-15T12:49:45.023

-1

Redirect your page to error in case of any abnormal service response codes. you can handle this by adding a method in service class and add that to catch of Observable of response. Probably we will handle this kind of response for 401 or 403, as @I46kok said try to change error codes as well

   public serviceMethod(){
      this.http.get(urlThatWillRedirect).catch(this.handleError).subscribe(data =>...);
   }


   private handleError(error:any){
       if(error.code === 403|| error.code === 401){
         // clear your user credentials here like localStorage,Auth token etc..
         window.location.href = '/#/error';
         return Observable.throw(error.json());
       }
   }

edited Jan 15 '20 at 12:49

answered Sep 12 '18 at 09:15

Ganesh

5,808
2
21
41

Does a 302 response result in an error with HttpClient? – jmrah Jan 14 '20 at 17:47
@jrahhali you can find more about this here... https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/302 – Ganesh Jan 15 '20 at 12:50

score -2 · Answer 4 · answered Oct 26 '20 at 21:15

-2

Look at angular docs: https://angular.io/guide/http

So what you do:

this.http.get(url, { observe: 'response' }).subscribe(resp => resp.headers.get('location'))

in a location redirect URL is placed

answered Oct 26 '20 at 21:15

Yura

1,733
1
20
19

This shouldn't work, as the browser will intercept 302 and honor it before Angular gets the response. Angular will get the response from the final location, which is what the OP doesn't want. – David Ammouial Jan 29 '21 at 21:31
@DavidAmmouial Why browser will do a redirect for background XMLHttpRequest? It never does so. I TRIED that code and it WORKS as expected – Yura Feb 01 '21 at 17:43

angular - how to handle redirect

4 Answers4