Angular2 - маршрутизатор-выход с логин-структурой

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

Как я могу управлять этой структурой? Мне нужны два роутера? первый для навигации между входами и домашними страницами и один для основного контента на домашней странице? Любая другая общая структура, которая проще, чем два роутера?

Ответ 1

Мне удалось достичь этого рабочего процесса, реализовав эту структуру. У меня есть два основных компонента:

LoginComponent, которым он является "/login". HomeComponent, который является маршрутом ''. (пустой маршрут).

Кроме того, я установил защиту моего HomeComponent, который проверяет, аутентифицирован ли пользователь в его canActivate. Если нет, я перемещаю пользователя на маршрут '/login'.

Затем в моем домашнем компоненте у меня есть шаблон со следующей структурой: панель инструментов, боковое меню и роутер-выход.

Последнее, что мне нужно сделать, это настроить другие маршруты приложений в качестве детских маршрутов моего HomeComponent. (например: '/news' является дочерним маршрутом '').

Ответ 2

Прежде всего, я настоятельно рекомендую использовать обновленный маршрутизатор Angular2. Самый новый маршрутизатор включает поддержку guards, которые добавляются к вашей конфигурации маршрута, чтобы предотвратить доступ к определенным маршрутам.

После обеспечения того, что у вас есть последний маршрутизатор, вам нужно сделать несколько вещей:

1) Создайте компонент верхнего уровня и вызовите App. Здесь будет <router-outlet>.

2) Создайте компонент Login. Этот компонент должен содержать форму для входа в ваше приложение, а также логику обработки входа. Создайте маршрут для этого компонента.

3) Создайте компонент Home (вы уже это сделали).

4) Используйте guard (новые функции на последнем маршрутизаторе), чтобы пользователи не могли получить доступ к домашнему компоненту перед входом в систему.

Ваш код будет выглядеть примерно так (подробнее см.: https://medium.com/@blacksonic86/upgrading-to-the-new-angular-2-router-255605d9da26#.n7n1lc5cl)

// auth-guard.ts
import { Injectable } from '@angular/core';
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from '@angular/router';

import { AuthService } from './services/auth/auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.authService.isLoggedIn()) {
      return true;
    }

    this.router.navigate(['login']);
    return false;
  }
}

Подробнее о охранниках:

Я бы также настоятельно рекомендовал прочитать на последнем маршрутизаторе Angular (недавно были обновлены документы): https://angular.io/docs/ts/latest/guide/router.html

Ответ 3

Ключ использует дочерние маршруты

import { RouterModule, Route } from '@angular/router';

const ROUTES: Route[] = [
  { path: 'home', component: HomeComponent },
  { path: 'notes',
    children: [
      { path: '', component: NotesComponent },
      { path: ':id', component: NoteComponent }
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(ROUTES)
  ]
})

увидеть больше здесь на-три-столбы-OF-angular-маршрутизации