按用户角色的Angular 4登陆页面路由答案

【问题标题】：Angular 4 landing page routing by user role按用户角色的Angular 4登陆页面路由
【发布时间】：2018-08-21 05:18:28
【问题描述】：

根据用户角色将用户路由到不同目标网页的最佳方式是什么？而

我现在在做什么：在登录组件中，我有一个 if-else 并导航到相关页面。但是我在注册页面和各个页面的“主页”按钮中都有相同的逻辑。

有没有更好的方法来按更安全的角色进行路由，例如在路由器本身内，而不必在整个地方重复相同的逻辑？

      if (UserTypeEnum.TeacherUserType === userType.Value) {
        this.router.navigate(["/teacher-landing/"]);
      } else if (UserTypeEnum.StudentUserType === userType.Value) {
        this.router.navigate(["/student-landing"]);
      } else if (UserTypeEnum.AdminUserType === userType.Value) {
        this.router.navigate(["/admin-landing"]);
      } else {
        this.router.navigate(["/login"]);
      }

或者我可以将所有这些 if-else 合并到一个组件中，例如SecuredHome，并使用到此 SecuredHome 的默认路由。

任何关于更好设计的建议，以确保不同用户角色到登录页面的安全性和更好的可扩展性，我们表示赞赏。

谢谢！

【问题讨论】：

看到这个angular.io/guide/router#milestone-5-route-guards
无论如何我可以让 Guard 返回正确的路径，而不仅仅是 true/false？使用真/假，我需要测试页面列表的访问，这不是很可扩展。
Nope Guards 如果用户可以访问路由则返回 true，如果不能访问则返回 false。在异步调用的情况下，它们还可以返回 Observable 或 Promise，稍后解析为布尔值. Angular 会让用户一直等待，直到守卫返回 true 或 false。

标签： angular

【解决方案1】：

从性能的角度来看，Switch case 语句比使用 if-else 更好。在单个组件中使用它，例如 SecuredHome 可以在集成中使用。

【讨论】：

【解决方案2】：

您可以创建一个 NavigationService 并将您的主页导航逻辑放在那里。然后将服务注入您要调用的组件中。这样你就不必重复逻辑了。

【讨论】：

【解决方案3】：

晚了几年，但我更喜欢映射解决方案。使管理要检查的 url 变得更简洁。不确定您的 userType.Value 是否为枚举，但如果有必要，您可以将其转换为字符串。

  const routeMap = {
     TeacherUserType: '/teacher-landing/',
     StudentUserType: '/student-landing',
     AdminUserType:   '/admin-landing'
  }      

  const foundUrl = routeMap[userType.Value]

  const url = foundUrl ? foundUrl : '/login'

【讨论】：