當在Chrome中選擇「在新標籤中打開鏈接」選項時，應用程序路由重新指向登錄角度應用程序

Question

我在我的Angular 2應用程序中發現了一個問題，我嘗試進行故障排除。目前我的路由按預期工作，當我點擊整個應用的鏈接時。這裏有一個如何路由路徑在我的根路由文件中定義的例子：

{ path: 'home', component: HomeComponent, canActivate: [AuthGuard], data: {contentId: 'home-page'} }, 
{ path: 'contacts', component: ContactsComponent, canActivate: [AuthGuard], data: {contentId: 'contacts-page'} }, 

然而，如果在點擊應用程序的鏈接路由到不同的組件，如果我還可以右鍵單擊我的鼠標，選擇「在新標籤中打開鏈接「，會發生什麼情況是，當新標籤頁打開時，而不是加載正確的組件，頁面將重定向到登錄頁面。再次，這隻會發生在我選擇Chrome中的「在新標籤中打開鏈接」選項。

爲我登錄組件的路線是這樣的：

{ path: 'login', component: LoginComponent }, 

爲了進一步澄清，只重直接的邏輯我的根路由文件是處理重新定向到主組件時，路線不能被識別：

{ path: '**', redirectTo: 'home' } 

這裏的「聯繫人」鏈接是什麼樣子的例子 - 這是上面列出的途徑之一： http://localhost:4200/contacts

這是默認的瀏覽器問題嗎？這是默認的Angular問題嗎？只是想知道我如何跟蹤這個問題來解決。

順便說一下，我認爲這可能是一個AuthGuard問題，但即使從「contacts」鏈接中刪除AuthGuard保護，當在新選項卡中打開時仍會重定向到登錄組件。

這裏是我的登錄組件的樣子：

constructor(private router: Router, 
       private route: ActivatedRoute, 
       private authenticationService: AuthenticationService, 
       private alertService: AlertService, 
       private idle: Idle) 
    {} 

    ngOnInit() 
    { 
     // reset login status 
     this.authenticationService.logout(); 

     // get return url from route parameters or default to '/' 
     this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/'; 
    } 

    login(response) 
    { 
     this.loading = true; 
     this.authenticationService.login(this.model.username, this.model.password) 
      .subscribe(
       data => 
       { 
        this.router.navigate(['/']); 
        this.reset(); 
       }, 
       error => 
       { 
        this.alertService.error(error, response); 
        this.loading = false; 
       }); 
     this.authenticationService.username = this.model.username; 
    } 

    reset() 
    { 
     this.idle.watch(); 
     this.idleState = ''; 
     this.timedOut = false; 
    } 
} 

爲的AuthenticationService這裏被稱爲相關的代碼如下所示：

login(username: string, password: string) 
{ 
    const u = encodeURIComponent(username); 
    const p = encodeURIComponent(password); 
    return this.http.post(this.url + this.ver + '/' + 'staff/login/' + u + '/' + p + '?' + this.key, {}) 
     .map((response: Response) => 
     { 
      const user = response.json(); 
      if (user && (response.status = 200)) 
      { 
       sessionStorage.setItem('currentUser', JSON.stringify(user)); 
       console.log('User ' + this.username + ' successfully authenticated with API'); 

       // Track active user id 
       this._userId = user.data._id; 

       // Trigger login change 
       this.change.emit(this); 
      } else 
      { 
       console.log('User ' + this.username + ' not recognized by API'); 
      } 
     }); 
} 

isAuthenticated() 
{ 
    if (sessionStorage.getItem('currentUser')) 
    { 
     return true; 
    } else 
    { 
     return false; 
    } 
} 

logout() 
{ 
    // remove user from local storage to log user out 
    sessionStorage.removeItem('currentUser'); 
    console.log('User successfully logged out'); 

    // Reset active user 
    this._userId = undefined; 

    // Trigger event 
    this.change.emit(this); 

} 

Answer 1

在意見討論答：在你的AuthenticationService，將sessionStorage更改爲localStorage。 sessionStorage僅在選項卡的生命週期中持續存在。

參考：https://blog.guya.net/2015/06/12/sharing-sessionstorage-between-tabs-for-secure-multi-tab-authentication/