為什么Angular canActivate功能防護在導航路線時執行了兩次

Question

我正在使用Angular 5並定義了幾個路由。 當我導航路線並在canActivate功能保護上放置一個斷點時，我看到它被執行了兩次。

我問這個是因為我必須在每個canActivate調用上調用外部服務，並且多次無用地執行相同的服務會導致不必要的開銷。

Answer 1

剛發生在我身上，問題出在我的AuthGuard這個片段：

setActiveWebsite(website: string): void {
    this._website.next(website);
    this.router.navigate([]);  <-- This line here
}

它執行了兩次，因為它設置了一個值，重定向，然后跳過auth，因為它立即解析為true 。

---

你可能在你的一個guards或resolvers使用route.navigate或重定向嗎？

Answer 2

Angular 7.1使用router.parseUrl（）方法解決了這個問題，該方法將路徑名（在路由模塊中設置）作為參數。

因此，而不是router.navigate(['__'])或router.navigateByUrl('__') ，順便說一句，如果用作重定向，則應該返回false返回 ，你會做優雅的return router.parseUrl('____') 。

我已經用盡了之前方法的許多變化，我現在計划我的日歷圍繞一個嚴格由角度保護邏輯組成的日歷。

每次我想要檢查日歷時，無需讓我回家，這個新的parseUrl（）升級大大改善了我的生活。

帽子提示Nate Lapinski和奇妙的Angular In Depth 。

Answer 3

它運行了幾次，因為路由器有幾個要處理的事件。 您可以測試這是否是這樣的最后一個事件。

this.router.events.subscribe(event => {
  if(event instanceof NavigationEnd) {
    // Last event, do your thing
  }
});

Answer 4

canActivate不是被多次執行，而是您訂閱的事件。 在你的情況下，它將是router事件。

你可以只觀看最后一個是NavigationEnd事件，正如@trichetriche在另一個答案中所解釋的那樣。