Question

我是Angular的新手，并且正在使用Angular-5。在我的应用程序中，我有2个屏幕/组件，分别称为“ 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将用户重定向到登录屏幕，则用户使用其有效凭据登录。当用户user中的用户登录重定向到/时，即默认路由，然后自动重定向到/Admin-Dashboard。

我的问题是我必须根据他的角色（HR或ADMIN）重定向到登录用户。如果user.role=="ADMIN"转到管理控制台，如果user.role ==“ HR”转到HR控制台。

当前，我的方法是，由于默认路由设置，用户首先将用户重定向到/Admin-Dashboard，然后在其构造函数中检查用户角色，如果是HR，则使用以下命令将用户重定向到“ HR-Dashboard” router.navigate()。此方法工作正常，但首先在地址栏中显示/ Admin-Dashboard，然后将其重定向到HR-Dashboard。

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

    }

我正在寻找一些更好的方法来实现相同的功能。我有什么方法可以检查自己是否是admin或hr并进行相应的重定向？

更新：对不起，我忘了提起大事，我使用Gluu（第三方身份验证服务器）作为身份验证服务器，它将用户重定向到我的应用程序网址（{{3 }}例如'https://ip/port'）如果用户已成功登录。我没有控件来更改gluu的导航，它将仅与用户数据一起重定向到我的默认url。甚至登录屏幕也不是我的应用程序的一部分，它托管在cloude上，我使用环境配置文件中的OIDC_Settings和AuthGaurd重定向到登录页面。

谢谢。

Answer 1

最好且有效的方法是在成功登录后检查角色，然后从那里重定向到相关的仪表板。

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

Answer 2

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

因此，当您单击LoginPage中的LOGIN按钮时，

执行“无论是admin还是hr”操作，然后将页面重定向到ADMIN Component或HR Component。

我的建议是，这可能会更好。

尝试并检查。

谢谢

Answer 3

对于您的更新：

只需创建一个空组件，然后在构造函数中进行验证并将URL发送到相应的页面。
大多数网站，例如JUSPAY，PAYTM等，通过该网站付款时，它将在一页内验证并移至所需的URL。

例如：如果您在redbus预订机票，请通过AMAZON PAY Wallet付款，您可以看到此URL重定向。

谢谢。希望对您有所帮助。

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

3 个答案: