title: How to achieve Role Based redirection after login in Angular-5?
body: <p>I am new to <code>Angular</code>, and i am using <code>Angular-5</code>.
  In my application i have 2 screens/components called '<strong>Admin-Dashboard</strong>' and '<strong>HR-Dashboard</strong>'. My default route is  <code>/Admin-Dashboard</code> have look at following routes:</p>
  
  <pre><code>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] }];
  </code></pre>
  
  <p>If user is not logged in the my <code>AuthGaurd</code> redirects user to login screen, then user loggs in with his valid credentials.when user loggs in  user user is redirected to <code>/</code> i.e. default route, which then auto redirected to <code>/Admin-Dashboard</code>.</p>
  
  <p>My problem is that i have to redirect to logged in user according to his role(HR or ADMIN). If <code>user.role=="ADMIN"</code> go to Admin-Dashboard, If user.role=="HR" go to HR-Dashboard.</p>
  
  <p>Currently my approach is,user  firstly redirected to <code>/Admin-Dashboard</code> due to default route setting, then in its constructor i check user role and if it is <code>HR</code> i redirect user to "HR-Dashboard" using <code>router.navigate()</code>.This works fine but in address bar first /Admin-Dashboard is rendered and then it redirects to HR-Dashboard.</p>
  
  <pre><code>if(this.authService.currentUser.role=='HR'){
        this.router.navigate(['HR-Dashboard']);
  
      }
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>Update:</strong> Sorry i forgot to mention big thing, I am using <code>Gluu</code> (a third party authentication server) as an authentication server which redirects user to my applications url(<a href="https://ip/port" rel="nofollow noreferrer">https://ip/port</a> e.g. '<a href="https://192.168.55.10:4200" rel="nofollow noreferrer">https://192.168.55.10:4200</a>') 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 <code>OIDC_Settings</code> and <code>AuthGaurd</code> in my environment configuration file.</p>
  
  <p>Thank you in advance.</p>