canActivate 中的 navigateByUrl

Question

我在这里看到一些示例代码：

https://medium.com/javascript-everyday/keep-data-in-the-state-object-during-navigation-in-angular-5657af156fb8

具体代码为：

  canActivate(next: ActivatedRouteSnapshot, { url }: RouterStateSnapshot): boolean 
  {
       if (!this.authService.isLoggedIn) {
             this.router.navigateByUrl('/auth', { state: { redirect: url } });
       }

       return this.authService.isLoggedIn;
  }

如果 this.authService.isLoggedIn = false，这里到底会发生什么？

然后在此 function 中调用 navigateByUrl，在返回 this.authService.isLoggedIn之前，这将如何表现？ function 会“立即”返回“false”作为值吗？ 或者 CanActivate 会被 navigateByUrl function 以某种方式“中止”吗？

解释起来有点棘手，但是从不再相关的 CanActivate function 返回一个值似乎很奇怪......因为您已经离开了请求的页面......

Answer 1

它将返回false ，但另外它将重定向user 。

当您尝试导航到只有登录用户才能导航的某些路线时，这很有用。 因此，如果用户未登录，您可能会将他重定向到Login Page并返回false 。 当您返回false时，当前导航将被取消。

class 可以实现的接口，作为决定是否可以激活路由的守卫。 如果所有守卫都返回 true，则导航继续。 如果任何守卫返回 false，导航将被取消。

您还可以返回UrlTree ，在这种情况下，当前导航将被取消并开始新的导航。

如果任何守卫返回一个 UrlTree，则当前导航被取消，并且新的导航开始到从守卫返回的 UrlTree。