Question

是否可以通过事件（例如Click）或URL识别何时通过某些路由访问？

URL调用时，我需要阻止访问。

示例：如果我输入“ www.example.com/shop/:id”重定向到“ www.example.com/shop”，则只有当我单击“ www.example.com/商店”视图

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

Answer 1

如果这是您要实现的功能，则原则上使用URL和路由器显示单个项目是错误的。 URL应该是资源定位符，应该代表某些应用程序状态。

可以共享URL并添加书签以返回到您之前的位置。为了不违反这一原则和用户期望，您应该在不使用路由器的情况下简单地在视图中加载项目。

但是，如果您坚持使用路由器并只是阻止通过地址栏打开URL，则应使用CanActivate接口实现Route Guard。

但是您将如何检测用户是否通过点击打开了项目？

一种方法是使用服务并跟踪用户单击了哪个项目。例如在您的组件中

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

}

是否可以通过URL或Click检查访问权限？

1 个答案: