Gibt es einen umfassenderen Weg zur Authentifizierung in Angular2 RC3 als Wächter?

Question

Ich habe eine vorhandene Angular2 App, wo Login/Authentifizierung wurde durch Erstellen einer AuthRouterOutletDirective, die die RouterOutlet erweitert behandelt. Dies erleichterte die Verwendung von componentInstruction in der Aktivierungsfunktion, um zu überprüfen, ob ein Benutzer eingeloggt war, wenn er nicht zu unserem Login-Portal weitergeleitet wurde (aus verschiedenen Gründen habe ich keine Kontrolle über eine separate App, die einen eigenen Login-Bildschirm hat und sendet dann ein Token zurück, das wir in der Angular2-App speichern würden, bevor wir zur nächsten Komponente navigieren.

Ich habe gerade auf den Router 3.0.0-alpha.8 aktualisiert und ich sehe, dass dies keine Option mehr ist und es wurde durch die Erstellung eines AuthGuard und die Verwendung der canActivate-Methode zur Authentifizierung umgehen (ich verweise zu diesem Abschnitt der documentation). Das Problem, mit dem ich Probleme habe, ist anscheinend, dass es für Apps entwickelt wurde, bei denen nur eine geringe Anzahl von Routen geschützt ist. Sie können einfach canActivate: [AuthGuard] zu jeder Route hinzufügen, die eine Authentifizierung in der RouterConfig erfordert.

Das Problem, das ich habe, ist, dass jede einzelne Route durch Authentifizierung geschützt werden muss. Es muss auch kontinuierlich überprüft werden (es sei denn, es gibt eine bessere Lösung), weil wir (wiederum teilweise aufgrund des externen Login-Service) die Benutzer abmelden und ihr Token löschen und das nächste Mal zu einem navigieren Neue Route (unabhängig von der Route) sollte Sie zum erneuten Anmelden umleiten. Ich verstehe, dass ich einfach canActivate: [AuthGuard] zu jeder einzelnen Route hinzufügen könnte, aber das scheint eine wahnsinnige und langwierige Lösung zu sein, vor allem für Apps mit einer großen Anzahl von Routen, bei denen ein Benutzer authentifiziert werden muss.

Ich habe nach einem Update gesucht, aber es scheint, vielleicht, zum Teil, weil das Upgrade ziemlich neu ist, dass alle Ressourcen für die Implementierung dieser AuthGuards auf nur ein oder zwei Routen sind. Ich habe durch den Quellcode (speziell here) gegraben, um zu sehen, ob es eine andere Methode gibt, die ich erweitern kann, die umfassender als canActivate oder eine universellere Weise ist, jede Route einen bestimmten Wächter zu haben, aber ich kann anscheinend nichts finden . Jeder Rat, wie dies am besten umgesetzt wird, wäre sehr willkommen! Vielen Dank.

Answer 1

zu meinem Kommentar Bezug, können Sie zusätzliche Wache so hinzufügen:

import {provideRouter, RouterConfig, Route, CanActivate, ActivatedRouteSnapshot} from '@angular/router'; 
import {Injectable} from "@angular/core"; 

@Injectable() 
class UniversalGuard implements CanActivate { 
    canActivate(route: ActivatedRouteSnapshot) { 
     console.log('applying can activate'); 
     return true; 
    } 
} 

let routes: RouterConfig = [ 
    {path: 'path1', component: Component1} as Route, 
    {path: 'path2', component: Component2} as Route, 
    {path: 'path3', component: Component3} as Route 
]; 

const routeAugumenter = route => { 
    let guards = route.canActivate || []; 
    guards.push(UniversalGuard); 

    route.canActivate = guards; 

    if (route.children) { 
     route.children = route.children.map(routeAugumenter); 
    } 

    return route; 
}; 

let augumentedRoutes = routes.map(routeAugumenter); 

console.log(augumentedRoutes); 

export const APP_ROUTER_PROVIDERS = [ 
    provideRouter(augumentedRoutes), UniversalGuard 
]; 

ich es nicht mit Kind Routen getestet, sollte aber auch funktionieren.

Bearbeiten: aktualisierte Informationen, wie Dienste in UniversalGuard injiziert werden.

Wenn Ihre Wache einige injizierte Dienste benötigt, injizieren Sie sie wie gewöhnlich in den Konstruktor. Sie müssen diese Dienste (und die Dienste, von denen sie abhängen usw.) in einem Angular Bootstrap-Aufruf und nicht in den Komponenten bereitstellen.