Question

这个问题是关于一个角落的情况，但我仍然想要在不破坏用户界面或让它看起来破碎的情况下正确处理它。最低应为404页。

让我们假设我有这条路线：

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

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

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

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

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

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

我不知道在早期的体育场 - 在路线被激活之前 - 该成员是否存在。

那你怎么处理这个问题呢？

选项1：导航很晚到404页

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

也许您有更多选择或更好的提案？

快乐路径 - 当用户使用用户界面导航

时

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

错误路径 - 当用户操纵网址以浏览ui时

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

为

解析器

路线：/projects/:projectId/administration/members 太早因为没有memberId

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

太晚，因为任务是成员列表的子路由/视图，这意味着我的任务组件必须与父成员组件通信才能同步/检查成员列表中的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;
      }
    });
  }

希望这会有所帮助!!

如何处理用户

1 个答案: