Lazy-Loaded-Module sicher schützen (Angular 2)

Question

Ich entwickle eine Anwendung, für die ich einen Benutzerbereich und einen Admin-Bereich habe. Ich habe diese in separate Angular 2 Module aufgeteilt. Ich habe erfolgreich Lazy-Loading implementiert, so dass das Admin-Modul nur geladen werden kann, wenn '/ admin' vom Benutzer angefordert wird.

aus dem Winkel 2-Dokumentation, wie ich sehe, dass ich wie so eine "canload" guard angeben:

canLoad(route: Route): boolean { 
    return this.authService.isAdmin(); 
} 

: wie so eine Funktion canload innerhalb einer AdminGuard Klasse

{ 
    path: 'admin', 
    loadChildren: 'app/admin/admin.module#AdminModule', 
    canLoad: [AdminGuard] 
    } 

und implementieren (wobei isAdmin() einen Aufruf an die Back-End-API senden könnte, die die Rolle des aktuellen Benutzers oder etwas Ähnliches zurückgibt)

Aber verhindert dies tatsächlich, dass admin vom Laden des AdminModules? Wenn ich nicht falsch verstanden habe, befindet sich der gesamte Code auf dem Client. Gibt es also irgendetwas, das den Client daran hindert, die "canLoad" -Methode so zu ändern, dass sie immer wahr zurückgibt? Wie so:

canLoad(route: Route): boolean { 
    return true; 
} 

So dem Kunden erlauben, irgendein Modul zu laden, das sie wollen.

Offensichtlich werden alle Aufrufe an die Backend-API, die den Admin-Status erfordern, geschützt, aber es scheint, als ob jeder Benutzer die Admin-Benutzeroberfläche sehen kann, was mir einfach etwas komisch vorkommt. Kann jemand das für mich klären?

Answer 1

Das ist eine gute Frage und ich war neugierig, ob jemand eine detaillierte Antwort dafür hatte. So fand ich diesen Link, der eine ziemlich gute Konversation hatte.

Angular 2 Reddit Article

Ein Kommentar, der mir wirklich ragten war dieser.

Sprechen in SPA, in der Regel HTML-Vorlagen und Ihre js-Dateien werden im Freien für jedermann Pflege genug, um zu überprüfen. Ihr SPA spricht nur in Daten (lesen: JSON) an Ihren Server. Die Vorlagen werden dann mit diesen Daten auf der Clientseite ausgefüllt. Ihr Hauptanliegen ist also , die diese API schützt. Sessions, Cookies, Tokens, alles sind Mittel, die hier noch gültig sind. Ich selbst benutze Tokens zur Authentifizierung und Autorisierung. Eine API-Anforderung würde ein serversigniertes Token enthalten, das dann verifiziert wird und aus dem Rollen und Berechtigungsnachweise extrahiert werden. Anschließend wird verwendet, um festzustellen, ob der Benutzer berechtigt ist, diese Anforderung zu stellen. Fehlgeschlagen Prüfung wird 401-Unbefugte an den Client zurückgeben. Auf Winkelseite, wir Speichern Token erhielten wir nach erfolgreicher Anmeldung dann verwenden Sie es für Folgeanfragen. Ich entschlüssele auch die Anmeldeinformationen und Rollen und mit Benutzerinformationen anzeigen und Routen autorisieren. Routes guard in angular ist erreicht durch CanActivate-Schnittstelle, die Sie mehrere von verknüpfen können: {Pfad: 'geschützt', CanActivate: [LoggedInGuard]}, {Pfad: "Supersecret", CanActivate: [LoggedInGuard, AdminGuard]}. ..etc Aber Client-Seite (lesen: eckigen) Wachen ist letztlich UX Problem, nicht eine Sicherheit bedeutet. Ein kenntnisreicher Hacker kann nur mit der Variablen mit dev-Konsole durcheinander bringen, oder umgehen Sie es ganz mit gerade api Aufruf.Es ist ziemlich viel, um den Benutzern zu zeigen, welcher Fehler passiert ist, und navigieren Sie woanders usw.