Angular2 - gniazdo routera ze strukturą logowania

Question

Buduję aplikację angular2 i obecnie mam komponent domowy z navbarem, paskiem narzędzi i gniazdem routera dla głównej zawartości. Chcę dodać jedną dodatkową stronę dla mechanizmu logowania, więc jeśli użytkownik nie jest uwierzytelniony, strona logowania będzie wyświetlana na całym ekranie, a po zalogowaniu się do użytkownika zostanie wyświetlona pozycja składnika o strukturze powyżej.

Jak zarządzać tą strukturą? Czy potrzebuję dwóch gniazd routera? pierwszy do nawigacji pomiędzy loginem a stronami głównymi, a drugi do głównej treści na stronie głównej? Jakakolwiek inna pospolita struktura, która jest bardziej prosta niż dwa wyjścia routera?

Answer 1

Udaje mi się osiągnąć ten przepływ pracy poprzez wdrożenie tej struktury. Mam dwa główne komponenty:

LoginComponent, którego trasa to "/ login". HomeComponent, którym jest trasa to "". (pusta trasa).

Dodatkowo ustawiłem straż dla mojego HomeComponent, który sprawdza, czy użytkownik jest uwierzytelniony w jego canActivate. Jeśli nie, nawiguję użytkownika do trasy "/ login".

Następnie w moim komponencie macierzystym mam szablon o następującej strukturze: pasek narzędzi, menu boczne i gniazdo routera.

Ostatnią rzeczą, którą muszę zrobić, to skonfigurować inne trasy aplikacji jako ścieżki potomne mojego HomeComponent. (na przykład: "/ news" to trasa podrzędna "").

Answer 2

Przede wszystkim bardzo polecam korzystanie ze zaktualizowanego routera Angular2. Najnowszy router zawiera obsługę guards, które są dodawane do konfiguracji trasy, aby uniemożliwić dostęp do określonych tras.

Po upewnieniu się, że masz najnowszą routera, musisz zrobić kilka rzeczy:

1) Utwórz komponent najwyższego poziomu i nazywają to App. Tutaj przejdzie Twoja <router-outlet>.

2) Utwórz komponent Login. Ten komponent powinien zawierać formularz logowania do aplikacji, wraz z logiką obsługi logowania. Utwórz trasę dla tego komponentu.

3) Utwórz komponent Home (już to zrobiłeś).

4) Użyj guard (nowa funkcjonalność w najnowszej routera), aby uniemożliwić użytkownikom dostęp do komponentu domu przed zalogowaniu

Twój kod będzie wyglądać mniej więcej tak (aby uzyskać więcej informacji, zobacz:. 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; 
    } 
} 

Aby uzyskać więcej informacji na strażników:

Chciałbym również gorąco polecam czytania na najnowszej Kątowymi routera (docs zostały niedawno aktualizacja): https://angular.io/docs/ts/latest/guide/router.html