如何实现在角-5登录后基于角色的重定向？

Question

我是Angular的新手，我正在使用Angular-5。在我的应用程序中，我有两个名为'Admin-Dashboard‘和'HR-Dashboard'.的屏幕/组件我的默认路由是/Admin-Dashboard，请查看以下路由：

const routes: Routes = [
    {
    path: 'Admin-Dashboard',
    component: AdminDashboardComponent,
    canActivate: [AuthGuard]
  },
  {
    path: HR-Dashboard',
    component:HRDashboardComponent,
    canActivate: [AuthGuard]
  }
  // otherwise redirect to home
  { path: '**', redirectTo: '/Admin-Dashboard', canActivate: [AuthGuard] }];

如果用户没有登录到我的AuthGaurd重定向用户登录屏幕，那么用户登录与他的有效credentials.when用户日志在用户用户中被重定向到/，即默认路由，然后自动重定向到/Admin-Dashboard。

我的问题是，我必须重定向到登录用户根据他的角色(人力资源或管理)。如果user.role=="ADMIN"转到Admin，如果user.role=="HR“转到HR。

目前我的方法是，用户首先由于默认路由设置而重定向到/Admin-Dashboard，然后在其构造函数中检查用户角色，如果是HR，则使用router.navigate().This将用户重定向到“HR-仪表板”，但在地址栏中，首先/Admin被呈现，然后重定向到HR-仪表板。

if(this.authService.currentUser.role=='HR'){
      this.router.navigate(['HR-Dashboard']);

    }

我正在寻找一些更好的方法来实现同样的功能。我是否可以通过任何方式来检查路由本身，用户是管理员还是hr，并相应地进行重定向？

更新:对不起，我忘了提一件大事，我正在使用Gluu (第三方身份验证服务器)作为身份验证服务器，如果用户成功登录，它会将用户重定向到我的应用程序url(https://ip/port，例如'https://192.168.55.10:4200')。我没有一个控件来改变从gluu导航，它只会重定向到我的默认url和用户数据。即使是登录屏幕也不是我的应用程序的一部分，它托管在cloude上，我在环境配置文件中使用OIDC_Settings和AuthGaurd重定向到登录页面。

提前谢谢你。

Answer 1

最好和有效的方法是检查成功登录方法时的角色，并将其重定向到相关的仪表板。

使用检查角色并相应地重定向的逻辑更改默认重定向。

Answer 2

首先，组件的构造函数首先执行。

所以当您点击LoginPage中的登录按钮时，

在那里执行“他是管理员还是人力资源”的操作，然后将页面重定向到管理组件或人力资源组件。

我的建议是这样可能更好。

试着检查一下。

谢谢

Answer 3

最新消息：

1. 只需创建一个空组件，并在Constructor中执行验证，并将URL发送到相应的页面。
2. 大多数的网站，如JUSPAY，PAYTM等，在通过这个网站付款时，它将在一个页面中验证并移动到所需的URL。

如果你在redbus订票，通过亚马逊付费钱包付款，你可以看到这个URL重定向。

谢谢。希望这会有所帮助。