在Angular-5中登录后如何实现基于角色的重定向? [英] How to achieve Role Based redirection after login in Angular-5?

问题描述

我是Angular的新手，并且正在使用Angular-5. 在我的应用程序中，我有2个屏幕/组件，分别称为" Admin-Dashboard "和" HR-Dashboard ".我的默认路由是/Admin-Dashboard，请查看以下路由:

I am new to Angular, and i am using Angular-5. In my application i have 2 screens/components called 'Admin-Dashboard' and 'HR-Dashboard'. My default route is /Admin-Dashboard have look at following routes:

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.

If user is not logged in the my AuthGaurd redirects user to login screen, then user loggs in with his valid credentials.when user loggs in user user is redirected to / i.e. default route, which then auto redirected to /Admin-Dashboard.

我的问题是我必须根据他的角色(HR或ADMIN)重定向到登录用户.如果user.role=="ADMIN"转到Admin-Dashboard，如果user.role =="HR"转到HR-Dashboard.

My problem is that i have to redirect to logged in user according to his role(HR or ADMIN). If user.role=="ADMIN" go to Admin-Dashboard, If user.role=="HR" go to HR-Dashboard.

当前我的方法是，由于默认路由设置，用户首先将用户重定向到/Admin-Dashboard，然后在其构造函数中检查用户角色，如果是HR，则使用router.navigate()将用户重定向到"HR-Dashboard".效果很好，但首先在地址栏中呈现/Admin-Dashboard，然后将其重定向到HR-Dashboard.

Currently my approach is,user firstly redirected to /Admin-Dashboard due to default route setting, then in its constructor i check user role and if it is HR i redirect user to "HR-Dashboard" using router.navigate().This works fine but in address bar first /Admin-Dashboard is rendered and then it redirects to HR-Dashboard.

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

    }

我正在寻找一些更好的方法来实现相同的功能. 有什么方法可以检查自己的路由，确定用户是admin还是hr并进行相应的重定向?

I am looking out for some better approach to achieve the same functionality. Is there any way through which i can check in routing itself whether user is admin or hr and redirect accordingly?

更新:抱歉，我忘了提起大事，我使用Gluu(第三方身份验证服务器)作为身份验证服务器，该服务器将用户重定向到我的应用程序url( https://192.168.55.10:4200 ')(如果用户已成功登录.)我无法控制从gluu更改导航，它将只能重定向到我的默认网址以及用户数据.甚至登录屏幕也不是我的应用程序的一部分，它托管在cloude上，我使用环境配置文件中的OIDC_Settings和AuthGaurd重定向到登录页面.

Update: Sorry i forgot to mention big thing, I am using Gluu (a third party authentication server) as an authentication server which redirects user to my applications url(https://ip/port e.g. 'https://192.168.55.10:4200') if user is successfully logged in. I don't have a control to change navigation from gluu it will only redirect to my default url along with user data. Even a login screen is not a part of my application, it is hosted on cloude and i redirect to login page using OIDC_Settings and AuthGaurd in my environment configuration file.

谢谢.

推荐答案

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

The best and efficient approach would be to check the role at the time of successful login method and redirect from there to relevant dashboard.

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

Change your default redirect with the logic which checks the role and redirect accordingly.

这篇关于在Angular-5中登录后如何实现基于角色的重定向?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！