在导航到页面之前检查 URL 中的数据是否有效答案

【问题标题】：Check if data in URL is valid before navigate to page在导航到页面之前检查 URL 中的数据是否有效
【发布时间】：2022-07-25 19:47:11
【问题描述】：

我想配置我的 Angular 组件，以便仅在 URL 中的 ID 有效时才加载页面。这里的重点是，我想保护页面免受用户手动输入随机 URL 和访问任何页面的影响。

我有一个带有列表的组件。

如果我点击“显示详细信息”，Angular 会导航到详细信息页面。如果输入的 URL 包含有效的 ID，我只想打开此页面。为此，我调用一个服务来将所有 ID 收集到一个字符串数组中。然后检查输入的 ID 是否是该数组的成员。

我尝试过的：

list.component.ts：


  ngOnInit() {
    this.fetchLists();
  }

  fetchLists() {
    from(this.listService.getGroups())
      .pipe(
        takeUntil(this.destroy$)
      )
      .subscribe({
        next: (listUI: ListUI[]) => {
          this.listData = listUI;
        },
        error: (error) => {
          this.logger.debug(error.message);
          this.certError = true;
        }
      });
  }

details.component.ts：


  ngOnInit() {
    this.fetchListsAndIDs();
    if (this.validIDsList.includes(listID)) {
      this.router.navigateByUrl(`/groups/lists/${listID}/details`);
    }
    else {this.router.navigateByUrl(`/groups/lists`);}
  }

  fetchListsAndIDs() {
    from(this.listService.getGroups())
      .pipe(
        takeUntil(this.destroy$)
      )
      .subscribe({
        next: (listUI: ListUI[]) => {
          const listData = listUI;
          this.validIDsList = listData.map((lists) => lists.id);
        },
        error: (error) => {
          this.logger.debug(error.message);
          this.certError = true;
        }
      });
  }

app.routing.module.ts

   {
    path: 'groups/lists/${listID}/details',
    component: DetailsComponent
   }

“groups/lists/99999999999/details”页面打开，数据为零，“this.validIDsList”未定义。有人可以帮我解决这个问题吗？

【问题讨论】：

也许你检查页面的长度作为一个字符串变量，如果它大于 0 你打开页面
我有想过，但不幸的是，当详细信息为空时，有一个有效的情况:(
这能回答你的问题吗？ Angular: Prevent navigating to non-existing id parameter

标签： javascript angular

【解决方案1】：

您几乎拥有正确的代码，但您错过了 this.fetchListsAndIDs() 正在执行异步 observable 的部分，因此您的 if..else 块甚至在 API 调用完成之前就已执行。

我建议，您将 if...else 检查包含在 next() 处理程序中。此外，我没有看到任何用于从 url 参数中获取 listID 的代码。因此，我也将其包含在 ngOnInit() 中。

 ngOnInit() {
    this.listID = this.route.snapshot.paramMap.get('listID');
    this.fetchListsAndIDs();
 }

  fetchListsAndIDs() {
    from(this.listService.getGroups())
      .pipe(
        takeUntil(this.destroy$)
      )
      .subscribe({
        next: (listUI: ListUI[]) => {
          const listData = listUI;
          this.validIDsList = listData.map((lists) => lists.id);
          this.handleNavigation();
        },
        error: (error) => {
          this.logger.debug(error.message);
          this.certError = true;
        }
      });
  }

  handleNavigation() {
     if (this.validIDsList.includes(this.listID)) {
       this.router.navigateByUrl(`/groups/lists/${listID}/details`);
     }
     else {
       this.router.navigateByUrl(`/groups/lists`);
     }
  }

【讨论】：