angular - how to handle redirect

user_1977315 0
Viewed 38193

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?

angular http-status-code-302
4 Answers

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

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

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

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

user_14068070
Related