Можно ли проверить доступ через URL или клик?

Question

Есть ли способ определить, когда к какому-либо маршруту осуществляется доступ по событию (например, по щелчку) или по URL-адресу?

Мне нужно заблокировать доступ, когда он вызывается по URL-адресу.

Пример: если явведите "www.example.com/shop/:id" перенаправить на "www.example.com/shop", пропустите только, если я нажимаю на какую-то кнопку в представлении "www.example.com/shop"

{
  path: 'shop',
  children: [
    {path: '', component: ShopListComponent},
    {path: ':id', component: ShopViewComponent}
  ]
}

Answer 1

Если это функция, которую вы хотите достичь, то в принципе использование URL и маршрутизатора для отображения отдельных элементов является неправильным.Предполагается, что URL-адрес является указателем ресурса и должен представлять состояние приложения.

URL-адреса могут быть общими и добавлены в закладки, чтобы вернуться к тому месту, где вы были раньше.Чтобы не нарушать этот принцип и ожидания пользователей, вам просто нужно загрузить элемент в вашем представлении без использования маршрутизатора.

Однако, если вы настаиваете на использовании маршрутизатора и просто запрещаете открывать URL через адресную строку, то вам следует реализовать Route Guard.с CanActivate интерфейсом.

Но как вы собираетесь обнаруживать, если пользователь открыл элемент нажатием кнопки мыши?

Один из подходов заключается в использовании сервиса и отслеживании того, на каком элементе щелкнул пользователь,Например, в вашем компоненте

  onClick(itemId) {
    this.itemNavService.allowNavigatingToItem(itemId);
    this.router.navigate(['/shop', itemId]);

  }

Тогда в вашем Route Guard:

@Injectable()
class CanOpenItem implements CanActivate {
  constructor(private itemNavService: ItemNavService) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
    return this.itemNavService.canActivate(route.params.id);
  }
}

и ваш сервис может быть что-то вроде:

@Injectable()
class ItemNavService {
  allowNavigatingTo = null;


  allowNavigatingToItem(itemId) {
    this.allowNavigatingTo = itemId;
  }

  canActivate(itemId) {
    return this.allowNavigatingTo === itemId;
  }

}