为什么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在另一个答案中所解释的那样。