router.navigate無法在Angular中運行或進入無限循環

Question

我正在使用Angular6。我有一個名為UserService的服務，該服務正在調用名為getUser()的函數。

在功能中，當用戶擁有無效令牌時，我想導航至登錄頁面。

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

我在很多組件中都調用getUser。 例如在ActiveOrdersComponent

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

我正在使用LazyLoader。

我的原始路徑是'/auth/orders/active'

目標登錄路徑為'/login'

函數getUser()無法導航並進入無限循環。 並且瀏覽器因多個控制台錯誤而凍結。

該函數返回false，並繼續執行組件中的代碼（由於我返回false，所以代碼將中斷）。

Answer 1

我在幾個小時前后都遇到了這個問題，我可以找到問題。 遇到此問題時，會發生兩件事：

1. 當您要將用戶重定向到另一個頁面並使用Navigation方法時，您應該輸入如下地址：

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

2. 有時您會在自己的組件中編寫此代碼。 例如，您在登錄組件中編寫了上面的代碼。 這會導致刷新頁面時面臨無限循環。 只是您應該在Navigation方法中更改地址以解決此問題。

我希望它可以幫助您