So trennen Sie Layouts zwischen gesicherten und nicht gesicherten Seiten

Versuchen Sie herauszufinden, wie Sie Layouts zwischen öffentlich und sicher trennen.So trennen Sie Layouts zwischen gesicherten und nicht gesicherten Seiten

Ich lese, es gibt ein Konzept um Kinder beim Einrichten von Routen, aber kann kein Beispiel finden, wo dies umgesetzt wird.

Wesentlichen, was ich erreichen möchte:

Public (nicht gesichert)

-Login
-Anmeldung
-Change Passwort

Layout ohne md -toolbar und md-sidenav

Sichere

Armaturenbrett
Profil
AddItem

nur zugänglich nach Anmeldung und haben ein Layout mit md-Symbolleiste und md-sidenav

Wenn jemand ein funktionierendes Beispiel hat auf Plunker oder ähnlichem würde sehr geschätzt werden.

Quelle

2017-03-19 Aeseir

Sie können dies mit der richtigen Verwendung der Routing- und Komponentenkonfiguration erreichen.

AppComponent - no layout goes here 
    children: 
    path: '', PublicRootComponent - Add your layout for your public component to this guy. 
             He has an embedded router-outlet to put the nested content 
             into the correct position 
     children: <- these children will use public's layout 
     path: 'login', LoginComponent  
     path: 'registration', RegistrationComponent 

    path: 'secure', SecureRootComponent - add your layout for your secured components 
             - again, this has a router-layout 
              to put nested content in correct position 
     children: <- these children will use secure's layout 

      path: 'dashboard', DashBoardComponent 
      path: 'profile', ProfileComponent

beachten Sie nur, dass die gesicherten Komponenten über 'secure/Armaturenbrett' und 'secure/profile' in meinem Beispiel zugegriffen werden.

Sie können die Dinge ändern sich um je nachdem, wie Sie möchten, dass Ihre URLs zu arbeiten, aber das Konzept bleibt das gleiche

EDIT:

Um einige Beispiele hinzufügen,

index.html

<html> 
<head> 
    ..... 
</head> 
<body> 
    <my-app></my-app> (or whatever your app selector is) 
</body> 
</html>

app-component.html

Beachten Sie, dass die App-Komponente keine Layout

PublicRootComponent

<h1>I am public root</h1> 
<div class="public-root-styling"> 
    <router-outlet></router-outlet> 
</div>

Sie Ihr Layout für Ihre öffentlichen Seiten und setzen Sie Ihren Router-outlet-Tag wo auch immer Sie erstellen hinzufügt Sie möchten, dass Ihr verschachtelter Inhalt in das Gesamtlayout übernommen wird.

SecureRootComponent

<md-sidenav-container> 
    <md-toolbar> I am secured content layout</md-toolbar> 
    <router-outlet></router-outlet> 
</md-sidenav-container>

Gleiches gilt für die sichere root - Erstellen Sie Ihr Layout innerhalb dieser Komponente selbst und Tag Verwendung Router Steckdose zu markieren, wo Sie Ihre gesicherten Komponenten wollen Content-injiziert werden.

Macht das Sinn?

Quelle

2017-03-20 00:05:53 snorkpete

Ich werde dies so bald einen Test geben, wie ich eine Chance bekommen. Wenn es das tut, wird der Trick großartig sein und du wirst mein sofortiger Freund sein :). (Das hat mich verrückt gemacht). – Aeseir

können Sie AutoGuard verwenden, die CanActivate implementieren.

export class AutoGuard implements CanActivate{ 
    constructor(private _sessionService : SessionService){} 
    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    //Some condition 
    return true; 
    } 
}

an Ihrem Schreib

path: 'some-path', 
component: YOUR_SECURE_COMPONENT , 
canActivate : [AutoGuard]

Quelle

2017-03-20 07:31:51

Wie ist das mit der Einrichtung mehrerer Layouts verbunden? Wie sagst du der App, zwischen Layouts zu unterscheiden? – Aeseir

müssen Sie eine weitere Route mit dem gleichen Pfad und ohne Schutz nach der sicheren Route hinzufügen. –

So trennen Sie Layouts zwischen gesicherten und nicht gesicherten Seiten

Antwort

Verwandte Themen