CODEWITHSUNDEEP
angularhttp-status-code-302
nagy.zsolt.hun
nagy.zsolt.hun

Reputation: 6694

How to handle redirect in Angular

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?

Upvotes: 16

Views: 63026

Answers (5)

fascynacja
fascynacja

Reputation: 2880

What I have done in similiar scenario is:

  • I have used the option observe: 'response' in order to get full information about the final redirection page url
  • and I have used the url to set as window.location
this.httpClient
    .post("/mydomain/j_spring_security_logout",
          "{}",
          { observe: 'response' ,responseType: 'text'})
    .subscribe(resp =>  {
        console.log(resp);
        if(resp.url != null) {
            window.location.href = resp.url;
        }
      })

Upvotes: 0

Yura
Yura

Reputation: 1823

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

Upvotes: -2

Ganesh
Ganesh

Reputation: 6016

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

Upvotes: -1

TtT23
TtT23

Reputation: 7040

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

Upvotes: 11

Bernie
Bernie

Reputation: 5055

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

Upvotes: 2

Related Questions