Угловое 2 Войти Модуль с шаблоном

Question

я сейчас

Один AppModule, который имеет ряд компонентов, и один AppCompoennt, который является шаблон componnet с маршрутизатора на выходе директивы.

Я хочу каким-то образом создать AuthModule, который имеет свой собственный шаблон AuthComponent между Login, Register Components.

1. Когда пользователь вошел в

2. он должен перейти к HomeComponent который оказывающего в AppComponent в AppModule.

3. И теперь AppComponent используется, как только пользователь вошел в систему. Когда пользователь выходит из системы.

4. Он должен вернуться к AuthModule.

Возможно ли иметь два шаблона компоновки и перемещаться между ними?

Answer 1

Это не так сложно. Все, что вам нужно, это родительский компонент, который обычно равен AppComponent. Внутри AppComponent у вас есть главный маршрутизатор. . И этот маршрутизатор-выходные нагрузки либо LoginComponent или компонент, который предназначен только для доступных пользователей, которые вошли в

Это может быть ваша конфигурация маршрутизатора вашего корня AppComponent:

{ 
    path: 'login', 
    component: LoginComponent, 
    canActivate: [AuthenticationGuard] 
}, 
{ 
    path: 'app', 
    canActivate: [AuthenticationGuard], 
    component: HomeComponent, 
    children: [ 
     ... 
    ] 
} 

Внутри вашего маршрутизатора конфигурации вы можете использовать CanActivate. CanActivate - это защитник, который проверяет, имеет ли пользователь разрешение на переход к маршруту/компоненту вашего приложения.

В приведенном выше примере AuthenticationGuard проверяет, вошел ли пользователь в систему или нет. Итак, теперь вы можете защитить свое приложение этим охранником. Если охранник получает информацию, которую вы зарегистрировали, он может автоматически перейти на HomeComponent.

Смотрите эту охрану в качестве примера, чтобы защитить вашу HomeComponent от неавторизованных пользователей:

@Injectable() 
export class LoggedInGuard implements CanActivate { 
    constructor(private loginService: LoginService, private router: Router) { } 

    canActivate() { 
     if (this.loginService.isLoggedIn() !== true) { 
      this.router.navigate(['/login']); 
      return false; 
     } else { 
      return true; 
     } 
    } 
} 

Если охранник возвращает истину, что означает, что маршрутизатор будет перемещаться по указанному маршруту. Если он возвращает false, маршрутизатор защищает маршрут, перенаправляя пользователя на страницу входа.

---

Так что теперь ваш переключается между обеими компонентами AppComponent-х router-outlet. В HomeComponent вы должны создать еще один router-outlet, если вы хотите иметь более одного компонента для своего приложения. Вы определяете эти компоненты как дочерние компоненты HomeComponent.

Подводя итог:

• AppComponent -> Переключение между Логина и дома компонента

• HomeComponent -> все содержание и компоненты, которые должны быть защищены

Так вы может видеть HomeComponent в качестве корневого компонента защищаемой части вашего приложения.