Перенаправить страницу без использования компонента в Angular5 - PullRequest
Новая
       10

Перенаправить страницу без использования компонента в Angular5

0 голосов
/ 18 мая 2018

После входа или регистрации я хочу создать класс, который будет определять роль аутентифицированного пользователя и перенаправлять его на нужную страницу.Есть ли другой способ сделать это, а не использовать угловой компонент?Что мне не нравится в странице компонента, так это то, что страница загружается перед перенаправлением, хотя компонент ничего не отображает, он все еще использует базовый шаблон из app.component.

Я используюKeycloak для регистрации и входа (то есть это не часть приложения, которое я разрабатываю, и я могу только установить redirectUri).Поэтому я могу перенаправить только на один URL.

1 Ответ

0 голосов
/ 18 мая 2018

Вот общая идея, которую я использовал для этого случая.

Создайте компонент входа, который имеет пустой шаблон (.html).

Убедитесь, что для него также установлена ​​маршрутизация.

app.routing.ts 

{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginScreenComponent},

login-screen.component.ts 

constructor(private keyCloakService: KeyCloakService, private router: Router) {}
ngOnInit() {
      // Do a call where you get logged in user and it's role, ex:
      let role = this.keyCloakService.getUserRole(); 

      // Do a redirect based on that role
      if(role == "admin){
           this.router.navigate(["/admin"]);
      }

  }

Один разВы получаете эту работу, я бы также предложил добавить AuthGuard к вашим маршрутным ролям.

Существует также второй , более чистый, подход, который вы можете использовать, нонемного сложнее, если вы раньше не работали с AuthGuard.

Короче говоря, вы бы справились с решением, которое я дал вам в вашей службе AuthGuard.Таким образом вы избежите создания компонента входа, но результат будет таким же.

А что касается шаблона app.component.ts , обычная практика заключается в том, что в нем есть только <router-outlet></router-outlet>, поэтому вы не загружаете никакихмакет, и у вас больше свободы над ним.

РЕДАКТИРОВАТЬ (ответ на вопрос ниже): Вы можете использовать свой безопасный и незащищенный макет с помощью маршрутизации.Например: 

  {
    path: 'admin',
    component: AdminLayoutComponent,
    canActivate: [Guard],
    children: [
      {
        path: '',
        loadChildren: './components/app-admin/secure.module#SecureModule'
      }
    ]
  }

И сделать то же самое для публичного размещения.Таким образом, вы будете иметь только в своем app.component, и будет гораздо больше свободы для перенаправлений и т. Д.

...