Angular Guards：防止手动访问 URL答案

【问题标题】：Angular Guards: Prevent manually accessing a URLAngular Guards：防止手动访问 URL
【发布时间】：2020-03-05 03:23:27
【问题描述】：

我们的应用中有几条路线不应该由用户直接在浏览器的地址栏中输入他们的 URL 来导航。

相反，我们只想在通过应用程序逻辑使用router.navigate() 以编程方式导航时使它们可访问。

使用 Angular 的 CanActivate 守卫，是否有一些标志或属性可以用来区分这两种情况：

当用户在地址栏中输入/no/direct/access 时直接访问路由
正在通过 router.navigate(['/', 'no', 'direct', 'access']) 访问路由（这可能又由不同的守卫触发，所以很遗憾，router.navigated 在这里似乎没有帮助）

【问题讨论】：

标签： javascript angular angular-router-guards

【解决方案1】：

我没有发现区分您描述的案例的可能性。我找到了一种方法来防止手动导航到路线

您可以查看路由器上的.navigated 属性。根据文档，它是

如果发生了至少一个导航事件则为真，否则为假

export class PreventDirectNavigationGuard implements CanActivate {
  constructor(
    private _router: Router,
  ) { }
  canActivate(
    _activatedRouteSnapshot: ActivatedRouteSnapshot,
    _routerStateSnapshot: RouterStateSnapshot,
  ): boolean | UrlTree {

    return this._router.navigated;
  }
}

Angular 也有导航触发标志。来自source code

Identifies how this navigation was triggered.

imperative - Triggered by `router.navigateByUrl` or `router.navigate`.
popstate -  Triggered by a popstate event.
hashchange - Triggered by a hashchange event.

       trigger: 'imperative' | 'popstate' | 'hashchange';

【讨论】：

如果您操纵 URL，您的应用将被重新加载，它会被视为 Angular 的第一次导航
谢谢。不幸的是，router.navigated 是false 从另一个守卫重定向时（请参阅我的问题中的第 2 点），因为之前没有“导航”:-( 意识到这是一个边缘案例，我可能需要完全想多了。