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

Я новичок в 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] }];

Если пользователь не залогинен в my AuthGaurd перенаправляет пользователя на экран входа в систему, затем пользователь входит в систему со своими действительными учетными данными. Когда пользователь входит в систему, пользователь перенаправляется на / то есть маршрут по умолчанию, который затем автоматически перенаправляется на /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 (сторонний сервер аутентификации) в качестве сервера аутентификации, который перенаправляет пользователя на URL моих приложений ( https://ip/port, например, ' https://192.168.55.10:4200/'), если пользователь успешно вошел в систему. Я не есть элемент управления, чтобы изменить навигацию с gluu, он будет перенаправлять только на мой URL-адрес по умолчанию вместе с пользовательскими данными. Даже экран входа в систему не является частью моего приложения, он размещен на cloude, и я перенаправляю на страницу входа, используя OIDC_Settings а также AuthGaurd в моем файле конфигурации среды.

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

Источник

3 ответа

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

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

Источник

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

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

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

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

Спасибо. Надеюсь, что это может быть полезным.

Источник

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

поэтому, когда нажимается ваша кнопка входа в LoginPage,

Там выполните операцию "Является ли он администратором или hr ", а затем перенаправьте страницу в компонент ADMIN или компонент HR.

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

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

Спасибо

Источник
Другие вопросы по тегам