Как добиться перенаправления на основе ролей после входа в Angular-5?

Я новичок в Angular и использую Angular-5. В моем приложении есть 2 экрана/компонента, которые называются «Панель администратора» и «Панель управления персоналом». Мой маршрут по умолчанию - /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 перенаправляет пользователя на экран входа в систему, тогда пользователь входит в систему со своими действительными учетными данными. Когда пользователь входит в систему, пользователь перенаправляется на /, т.е. маршрут по умолчанию, который затем автоматически перенаправляется на /Admin-Dashboard.

Моя проблема в том, что я должен перенаправить зарегистрированного пользователя в соответствии с его ролью (HR или ADMIN). Если user.role=="ADMIN", перейдите в Admin-Dashboard, Если user.role=="HR" перейдите в HR-Dashboard.

В настоящее время мой подход заключается в том, что пользователь сначала перенаправляется на /Admin-Dashboard из-за настройки маршрута по умолчанию, затем в его конструкторе я проверяю роль пользователя, и если это HR, я перенаправляю пользователя на «HR-Dashboard», используя router.navigate(). Это работает нормально, но сначала в адресной строке / Admin-Dashboard визуализируется, а затем перенаправляется на HR-Dashboard.

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-адрес по умолчанию вместе с данными пользователя. Даже экран входа в систему не является частью моего приложения, он размещен в облаке, и я перенаправляю на страницу входа, используя OIDC_Settings и AuthGaurd в файле конфигурации моей среды.

Заранее спасибо.


angular angular2-routing auth-guard gluu
person Anonymous    schedule 04.07.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Лучшим и эффективным подходом будет проверка роли во время успешного входа в систему и перенаправление оттуда на соответствующую панель управления.

Измените перенаправление по умолчанию с помощью логики, которая проверяет роль и перенаправляет соответствующим образом.

person Pardeep Jain    schedule 04.07.2018
comment
Или вы также можете сделать это в AuthGuard, так как это делается при аутентификации. Но я согласен, делать это в службе входа в систему чище. - person ; 04.07.2018

arrow_upward
0
arrow_downward

Во-первых, конструктор компонента выполняет First.

поэтому, когда ваша кнопка LOGIN на LoginPage нажата,

Там выполните операцию «будь то админ или hr», после чего вы перенаправляете страницу на ADMIN Component или HR Component.

Мое предложение, это может быть лучше.

Попробуйте и проверьте.

Спасибо

person Sivabalakrishnan    schedule 04.07.2018
comment
я ценю ваш ответ. но я забыл упомянуть процесс входа в систему, теперь я обновил свой вопрос. В данном случае такое решение невозможно. - person Anonymous; 04.07.2018

arrow_upward
0
arrow_downward

Для вашего обновления:

  1. Просто создайте пустой компонент и в конструкторе выполните проверку и отправьте URL-адрес на соответствующую страницу.

  2. Большинство веб-сайтов, таких как JUSPAY, PAYTM и т. д., при оплате через этот веб-сайт будут проверяться на одной странице и перемещаться по нужному URL-адресу.

Например: если вы бронируете билет в Redbus, платите через кошелек AMAZON PAY, вы можете увидеть это перенаправление URL.

Спасибо. Надеюсь, это будет полезно.

person Sivabalakrishnan    schedule 05.07.2018