router.navigate无法在Angular中运行或进入无限循环

Question

I'm using Angular 6. I have a service called UserService which is calling a function called getUser() .

In the function I want to navigate to the login page when the user has an invalid token.

getUser(){
 this.user = JSON.parse(sessionStorage.getItem('currentUser'));
 if (!this.user) {
   this.router.navigate(['login']);
   this.toastr.error('Unknown Logged In User');
   return false;
 }
 this.token = this.user.token;
 return this.user;
}

I'm calling getUser in a lot of components. for example in the ActiveOrdersComponent

getCurrentUser() {
    let loggedUser = this.userService.getUser();
    if (loggedUser) {
        this.info = {
            currentUser: {
                currentUserName: loggedUser.first_name + ' ' + loggedUser.last_name
            }
        }
    }
    return this.info.currentUser;
}

Im using LazyLoader.

My original path is '/auth/orders/active'

Destination Login path is '/login'

the function getUser() is not navigating and going into an infinite loop. and the browser is freezing with multiple console errors.

the function is returning false and continues to execute the code in the component (which will break because I'm returning false).

Answer 1

i have had this issue before and after some hours i could find the problem. there are 2 things happen when you face with this problem:

1. when you want to redirect user to another page and use navigate method, you should put the address like this :

     this.router.navigate(['/login'] 

2. sometimes you write this code in its own component. for example, you write the code above in the login component. this causes that you face with infinite loop when you refreshing the page. just you should change the address in navigate method to put away this problem.

i hope that it helps you