Angular 2 router.navigate() in HTTP error handler

Question

I'm trying to make a system in angular that navigates to the login page if the server returns an 401 error, I tried this but it doesn't navigate:

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';
import { Router } from '@angular/router';

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {

  private heroesUrl = 'http://localhost:8000/auth/loggedIn';

  constructor (private http: Http, private router: Router) {}

  loggedIn (): Observable<string|number> {
    return this.http.get(this.heroesUrl)
      .map(res => { return res.json(); })
      .catch(this.handleError);
  }

  private handleError (error: Response|any) {
    if (error.status == 401) {
      this.router.navigate(['/path_to_login_page']);
      return error.status;
    }
  }
}

And I already checked the response from the server and I also console logged error.status == 401, and it did return true, can anyone help me with this problem.

Thanks in advance

seidme · Accepted Answer · 2017-01-12 23:02:34Z

4

Angular provides two options for navigating (Router Class):

Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute. Usage:

this.router.navigate(['team', 33, 'user', 11], {relativeTo: route});

Navigate based on the provided url. This navigation is always absolute. Usage:

this.router.navigateByUrl('/team/33/user/11');

If you attempted to use the first option, remove the / prior the command:

this.router.navigate(['path_to_login_page']);

edited Jan 12, 2017 at 23:02

answered Jan 12, 2017 at 22:55

seidme

13.1k5 gold badges39 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nusje2000 Over a year ago

I cant try it now but I think this should work, thanks.

leosteffen Over a year ago

@nusje2000 have you tried it, and did it solve your problem?

nusje2000 Over a year ago

Yea sorry, I forgot about it but yea it did.

Abhinav Alok · Accepted Answer · 2018-07-13 08:37:15Z

1

What I had to do was to incapsulate the this.router.navigate([]) inside an setTimeout(() => ...) function.

So this would like something like

private handleError (error: Response|any) {
    if (error.status == 401) {
      setTimeout(() => this.router.navigate(['/path_to_login_page']));
      return error.status;
    }
  }

I know that this particular question is answered before, I just put it out here in case others like me ends up here :)

edited Jul 13, 2018 at 8:37

Abhinav Alok

1181 gold badge1 silver badge17 bronze badges

answered Oct 12, 2017 at 10:09

jonas

1,6603 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular 2 router.navigate() in HTTP error handler

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related