angular2 - Benutzeranmeldung überprüfen

Ich fange an, alles über Winkel 2 zu lernen und habe derzeit ein Problem. Ich habe diese Routen in meiner Anwendung definiert:angular2 - Benutzeranmeldung überprüfen

const appRoutes: Routes = [ 
    {path: 'start', 
    component: StartComponent, 
    children:[{path: '' }, 
     { 
     path:'nested', component:NestedTestComponent 
     } 
    ]}, 
    {path: '', component:LoginFormComponent} 
];

Es ist der „Basis“ Weg, ein Login-Formular zeigt, nachdem die Benutzer Anmeldeinformationen eingegeben (und sie sind richtig), wird der Benutzer gerichtet zu „Start“ und dies als verschachtelte Route "verschachtelt". Das funktioniert super. Aber ich möchte irgendwie den Benutzer auf "Start" und "Nested" zu beschränken, wenn der Benutzer nicht angemeldet ist. Denn das ist derzeit nur mit der Eingabe als URL möglich.

Meine index.html sieht wie folgt aus:

<body> 
    <app-root>Loading...</app-root> 
</body>

app.component: war

@Component({ 
    selector: "app-root", 
    template: ` 
     <router-outlet></router-outlet> 
     `, 
    styleUrls: ['./app.component.css'] 
})

start.component

<nav> 
    <div class="nav-wrapper"> 
     <a href="#" class="brand-logo center"></a> 
     <ul id="nav-mobile" class="right hide-on-med-and-down"> 
     <li><a (click)="logout()">Logout</a></li> 
     </ul> 
    </div> 
    </nav> 
    <router-outlet></router-outlet>

Da alles irgendwie in dem mein Ansatz verschachtelt um die app.component einzuchecken, wenn der Benutzer damit angemeldet ist:

export class AppComponent { 



    constructor(af:AngularFire, router:Router){ 
    if(af.auth.getAuth() == null){ 
     //redirect to start 
     console.log('redirect to login'); 
     router.navigate(['']); 
    }else{ 
     console.log('not redirect to login'); 
    } 
    } 
}

Dies funktioniert und erkennt ordnungsgemäß, ob der Benutzer umgeleitet werden soll oder nicht. Die router.navigate(['']); funktioniert jedoch nicht. Es tut einfach nichts.

Quelle

2016-09-25 user2529173

Mit CanActivate können Sie dem Benutzer erlauben, die Seite nur zu besuchen, wenn sie auf der Route aktiviert wurde oder sie zur Anmeldung weiterleiten.

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { CanActivateAuthGuard } from './auth.service' 

import { MyComponent } from './app.component'; 

const routes: Routes = [ 
    { path: '/home', component: MyComponent , canActivate: [CanActivateAuthGuard]}]

/In Auth Service/

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

@Injectable() 
export class CanActivateAuthGuard implements CanActivate { 
    constructor(private router: Router) {} 
    if (this.authService.isLoggedIn()) { 
     return true; 
    } 
    //Redirect the user before denying them access to this route 
    this.router.navigate(['/login']); 
    return false; 
}

Quelle

2016-09-25 08:36:41 Manish

Könnten Sie ein Beispiel * in der Antwort *? Ein Link allein ist [nicht nützlich] (http://meta.stackexchange.com/questions/225370/your-answer-is-in-another-castle-when-is-ansanswer-not-an-answer). – jonrsharpe

Importieren Sie {ModuleWithProviders} aus '@ angular/core'; Importiere {Routes, RouterModule} von '@ angular/router'; Import {CanActivateAuthGuard} von './auth.service' Import {MyComponent} von './app.component'; const Routen: Routen = [ {Pfad: '/ home', Komponente: MyComponent, canActivate: [CanActivateAuthGuard]}] /* In Auth Service */ – Manish

Bitte, dass bearbeiten ** in die Antwort **. – jonrsharpe

angular2 - Benutzeranmeldung überprüfen

Antwort

Verwandte Themen