How to achieve Role Based redirection after login in Angular-5?

问题

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] }];

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.

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.

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']);

    }

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?

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.

Thank you in advance.

回答1:

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.

回答2:

Firstly , Constructor of a component executes First .

so when your LOGIN Button in LoginPage is Clicked ,

There perform the operation "whether he is admin or hr " then there you redirect the page to ADMIN Component or HR Component.

My suggestion is this may be better.

Try and Check.

Thank you

回答3:

For Your Update :

1. Just Create a Empty Component and in Constructor- Do the validation and send the URL to corresponding Page.

2. Most of Websites like JUSPAY , PAYTM etc , while paying through this website , it will validate in one page and moves to URL Which is needed.

Eg: if you r booking ticket in redbus , pay through AMAZON PAY Wallet , You can see this URL Redirection.

Thank you. Hope may this helpful.

来源：https://stackoverflow.com/questions/51171468/how-to-achieve-role-based-redirection-after-login-in-angular-5