如何处理用户对路线的操作

Question

这个问题是关于极端情况的，但我仍然想在不破坏用户界面或让它看起来很糟糕的情况下正确处理它。至少应为 404 页面。

假设我有这条路线：

/projects/:projectId/administration/members/:memberId

用户现在使用不存在的 memberId 操纵路由。

代码知道 memberId 不存在，因为当数据库请求完成后，我在成员列表中搜索该 memberId。

如果 memberId 存在，我会在该列表中突出显示该成员，并调用另一个 router.navigate() 方法来：

/projects/:projectId/administration/members/:memberId/tasks

但是由于 memberId 不存在并且路由已经激活，再次导航到我的 404 组件看起来很愚蠢...

我不知道在早期的体育场 - 在路由激活之前 - memberId 是否存在。

那么你会如何处理这个问题呢？

选项 1：很晚才导航到 404 页面

选项 2：保持成员列表不变，因为您无法在路由中突出显示该 memberId。

也许您有更多选择或更好的建议？

Happy Path - 当用户使用用户界面导航时

用户在根路径上/projects
用户选择一个项目并点击打开
用户被导航到子路由：/projects/:projectId/administration/members
显示成员列表
用户通过（单击）选择一个成员，该成员被突出显示并且手动路由导航完成到另一个子路由：/projects/:projectId/administration/members/:memberId/tasks

错误路径 - 当用户操纵 url 以在 ui

中导航时

用户在路径上：/projects/:projectId/administration/members/:memberId/tasks 并像 50000 而不是现有的那样操纵 memberId。没有任务返回。但是...当用户然后开始为不存在的 memberId 创建一个新任务并将其保存到服务器时，它当然会崩溃，因为 ForeignKey 无效...

为

创建一个 解析器

路线：/projects/:projectId/administration/members 太早了，因为不存在 memberId

路线：/projects/:projectId/administration/members/:memberId/tasks

太迟了，因为任务是成员列表的子 route/view，这意味着我的任务组件必须与父成员组件通信才能sync/check 成员列表中的memberId。太可怕了...

Answer 1

出于同样的原因Resolve guard is present to Fetch data before navigating.。

在下面的示例中，如果未发现危机，用户将被发送到列表。

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
    let id = route.params['id'];
    return this.cs.getCrisis(id).then(crisis => {
      if (crisis) {
        return crisis;
      } else { 

        // id not found 
        this.router.navigate(['/crisis-center']);

        return null;
      }
    });
  }

希望对您有所帮助！！

如何处理用户对路线的操作

How to handle the route manipulation by the user

angular2-routing

angular