如何处理用户的路由操作

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 - 当用户使用用户界面导航时

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

Bad Path - 当用户操纵 url 以在 ui 中导航时

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

为

创建一个解析器

路线：/projects/:projectId/administration/members 为时过早，因为没有 memberId

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

为时已晚，因为任务是成员列表的子路由/视图，这意味着我的任务组件必须与父成员组件通信才能同步/检查成员名单。太可怕了……

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

希望这会有所帮助！