Аутентификация Angular 2 с дочерними маршрутами

Для тех, кто найдет это, ответ теперь в Angular 2 — использовать «Guards» как часть нового маршрутизатора. См. документацию по Angular 2:

https://angular.io/docs/ts/latest/guide/router.html#!#guards

Базовая защита просто реализует «CanActivate» и может работать следующим образом:

import {Injectable} from "@angular/core";
import {CanActivate, Router} from "@angular/router";
import {AuthService} from "../services/auth.service";

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

    canActivate(){
        if(this.authService.isAuthenticated())
            return true;

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

Как вы можете видеть в этом примере, у меня есть AuthService, работающий где-то еще (реализация не важна), который может сообщить охраннику, прошел ли пользователь аутентификацию. Если они есть, верните true, и навигация произойдет как обычно. Если нет, мы возвращаем false и перенаправляем их на экран входа в систему.

Вот обновленный пример использования AuthGuard с Angular 2 RC6.

Маршруты с домашним маршрутом, защищенные AuthGuard

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

import { LoginComponent } from './login/index';
import { HomeComponent } from './home/index';
import { AuthGuard } from './_guards/index';

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },

    // home route protected by auth guard
    { path: '', component: HomeComponent, canActivate: [AuthGuard] },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

AuthGuard перенаправляет на страницу входа, если пользователь не вошел в систему

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate() {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page
        this.router.navigate(['/login']);
        return false;
    }
}

Полный пример и рабочую демонстрацию вы можете найти на странице этот пост

Вы также можете использовать CanActivate, однако прямой DI не поддерживается на данный момент. Вот хороший обходной путь.

Удачи.