Angular 2 Umleitung, wenn der Benutzer in

Question

angemeldet ist, ich habe Routen wie folgt aus:

const routes: Routes = [ 
    { path: '', redirectTo: '/login', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }, 
]; 

und AuthGuard:

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

    canActivate() { 
    if (this.authService.isLoggedIn()) { 
     return true; 
    } 
    this.router.navigate(['login']); 
    return false; 
    } 
} 

Wenn der Benutzer besucht die Website, wird er auf die Login-Seite umgeleitet. Das Gleiche passiert, wenn der Benutzer versucht, auf die Route /dashboard ohne Authentifizierung zuzugreifen. Wie kann ich den Benutzer auf /dashboard umleiten, wenn er eingeloggt ist? Zum Beispiel, wenn ich myapp.com besuche und ich eingeloggt bin, möchte ich zu myapp.com/dashboard umgeleitet werden.

Answer 1

In diesem Fall habe ich wohl alles DashboardComponent mit

{path: '', redirectTo: 'dashboard', pathMatch: 'full'}

und als die Dashboard-Komponente umleiten würde bestimmte kann, wenn der Benutzer angemeldet ist oder nicht (wie es AuthGuard aktiv ist), und wenn die Benutzer ist nicht eingeloggt und würde ihn zur Anmeldung weiterleiten.

Answer 2

Sie möchten resolve Eigenschaft innerhalb der Route Schnittstelle betrachten. https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

Alle folgenden Eigenschaften sind auf einer Route zur Verfügung:

export interface Route { 
    path?: string; 
    pathMatch?: string; 
    matcher?: UrlMatcher; 
    component?: Type<any>; 
    redirectTo?: string; 
    outlet?: string; 
    canActivate?: any[]; 
    canActivateChild?: any[]; 
    canDeactivate?: any[]; 
    canLoad?: any[]; 
    data?: Data; 
    resolve?: ResolveData; 
    children?: Routes; 
    loadChildren?: LoadChildren; 
    runGuardsAndResolvers?: RunGuardsAndResolvers; 
    _loadedConfig?: LoadedRouterConfig; 
} 

resolve so konzipiert, dass Sie irgendeine Art von Daten auf die Route vor Verfahren laden. Die Signatur für resolve sieht wie folgt aus:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<T>|Promise<T>|T 

Wir jedoch, dass die Unterzeichnung ignorieren und einfach überschreiben, da wir in diesem Fall zu /Armaturenbrett umleiten möchte nur, wenn der Benutzer -logged in- ist. Sonst Anzeige /Login normal routen.

Die Lösung besteht darin, eine injectable Klasse zu erstellen und an die Eigenschaft resolve der Login-Route anzuhängen.

@Injectable() 
class IsLoggedIn { 
    constructor(
    private router: Router, 
    private authService: AuthService) { 
    } 

    resolve(): void { 
    if (this.authService.isAuthenticated) this.router.navigate(['/dashboard']) 
    } 
} 

Auf Ihrer /login Route die resolve-Eigenschaft hinzuzufügen.

{ 
    path: 'login', 
    component: LoginComponent, 
    resolve: [IsLoggedIn] 
} 

nun jederzeit ein -logged in- Benutzer versucht, /login zu gehen, werden sie zu /Armaturenbrett ohne die Login-Seite zu sehen, umgeleitet werden.

Answer 3

Wahrscheinlich die schnellste Sache zu tun ist, Ihre LoginComponent zwicken.

Vorausgesetzt, dass this.authService.isLoggedIn() einen booleschen Wert zurückgibt.In Ihrem LoginComponent können Sie schnell den Zustand in ngOnInit prüfen, wie unten:

import { Component, OnInit } from '@angular/core'; 
import { Router, ActivatedRoute } from '@angular/router'; 

import {AuthService} from '<path_to_your_auth_service>'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.scss'], 
    providers: [] 
}) 
export class LoginComponent implements OnInit { 
    constructor(
    private _route: ActivatedRoute, 
    private _router: Router, 
    private _authService: AuthService 
) 

    ngOnInit() { 
    // get return url from route parameters or default to '/' 
    this.returnUrl = this._route.snapshot.queryParams['returnUrl'] || '/'; 

    // CHECK THE isLoggedIn STATE HERE 
    if (this._authService.isLoggedIn()) { 
     this._router.navigate([this.returnUrl]); 
    } 

    } 

    // Rest fo the logic here like login etc 

    login() { } 

} 

Beachten Sie, dass Sie nur diese ngOnInit zum Hinzufügen

if (this._authService.isLoggedIn()) { 
    this._router.navigate([this.returnUrl]); 
}