Angular Guards: предотвратить ручной доступ к URL

Question

В нашем приложении есть несколько маршрутов, по которым пользователь не должен перемещаться, напрямую вводя их URL-адреса в адресную строку браузера.

Вместо этого мы хотим сделать их доступными только тогда, когда мы осуществляем программную навигацию с использованиемrouter.navigate() через логику нашего приложения.

При использовании защиты CanActivate от Angular есть какой-либо флаг или атрибут, который мы могли бы использовать для различения этих двух случаев:

1. Доступ к маршруту осуществляется напрямую, когда пользователь набрал /no/direct/access в адресной строке

2. Доступ к маршруту осуществляется через router.navigate(['/', 'no', 'direct', 'access']) (который, в свою очередь, может быть вызван другой защитой, поэтому router.navigated к сожалению, похоже, здесь не помогает)

Answer 1

Я не нашел возможности различить описанные вами случаи. Я нашел способ запретить ручную навигацию по маршруту, хотя

Вы можете проверить .navigated свойство на маршрутизаторе. В соответствии с документами, это

True, если произошло хотя бы одно навигационное событие, иначе false

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

    return this._router.navigated;
  }
}

Также Angular имеет флаг триггера навигации. Из исходный код

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';