Routing condizionale Angular2

Question

Questa potrebbe essere una domanda di base, ma in Angular2 esiste un modo per eseguire il routing condizionale? Oppure qualcuno lo farebbe fuori dal router?

so ui-router ha una certa capacità di fare questo, ma non ho visto nulla di simile in router Angular2s

Answer 1

aggiornamento

Nelle nuove guardie router può essere utilizzato al posto https://angular.io/docs/ts/latest/guide/router.html#!#guards

originale (per il router andato lungo)

Attuare il CanActivate gancio del ciclo di vita come mostrato qui Life cycle hooks in Angular2 router e restituire false se si desidera impedire la navigazione. Vedere anche https://angular.io/docs/ts/latest/api/router/CanActivate-var.html

Answer 2

Come accennato, Angular Route Guards sono un buon modo per implementare percorsi condizionali. Poiché Angular Tutorial è un po 'prolisso sull'argomento, ecco un breve riassunto su come usarli con un esempio.

1. Esistono diversi tipi di protezioni. Se hai bisogno di qualcosa della logica if (loggedIn) {go to "/dashboard"} else { go to "/login"}, allora quello che stai cercando è il CanActivate -Guard. CanActivate può essere letto come "La nuova route X può essere attivata se tutte le condizioni Y sono soddisfatte". Puoi anche definire effetti collaterali come i reindirizzamenti. Se questo non si adatta alla tua logica, controlla la pagina Esercitazione angolare per vedere gli altri tipi di guardie.

2. Creare un auth-guard.service.ts.

3. popolano la auth-guard.service.ts con il seguente codice:

import { Injectable } from '@angular/core'; 
import {CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router'; 

@Injectable() 
export class AuthGuardService implements CanActivate { 

    constructor(
    private router: Router 
) {} 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    const isLoggedIn = false; // ... your login logic here 
    if (isLoggedIn) { 
     return true; 
    } else { 
     this.router.navigate(['/login']); 
     return false; 
    } 
    } 

} 

4. registrare l'auth-guard.service.ts nel percorso-modulo. Inoltre, aggiungi la coppia chiave-valore canActivate:[AuthGuardService] a tutte le rotte che vuoi sorvegliare. Dovrebbe essere un po 'come questo:

const appRoutes: Routes = [ 
    { path: '', component: LandingComponent}, 
    { path: 'login', component: LoginComponent}, 
    { path: 'signup', component: SignUpComponent}, 
    { path: 'home', component: HomeComponent, canActivate: [AuthGuardService]}, 
    { path: 'admin', component: AdminComponent, canActivate: [AuthGuardService]}, 
    { path: '**', component: PageNotFoundComponent } 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(appRoutes) 
    ], 
    exports: [ 
    RouterModule 
    ], 
    providers: [ 
    AuthGuardService 
    ] 
}) 
export class AppRoutingModule { } 

Questo dovrebbe iniziare.

Ecco una demo minimalista: https://stackblitz.com/edit/angular-gltybk

Answer 3

Nel caso in cui avete bisogno di rendere un componente specifico piuttosto che reindirizzare ad esso, si può fare qualcosa di simile:

const appRoutes: Routes = [ 
    { 
    path: '' , 
    component: (() => { 
     return SessionService.isAnonymous() ? LoginComponent : DashboardComponent; 
    })() 
    } 
] 

Ho usato questo esempio per l'atterraggio pagina, in cui l'utente che non ha effettuato l'accesso in precedenza potrebbe visualizzare la pagina di destinazione o il dashboard del dashboard.

Aggiornamento Questo codice funzionerà in ambiente dev, ma non costruirà ed otterrete questo errore:

ERROR in errore durante il modello di compilazione di 'AppRoutingModule' espressioni di funzione non sono supportati in decoratori in 'ɵ0' 'ɵ0' contiene l'errore su src/app/app.routing-module.ts (14,25) Considera di modificare l'espressione della funzione in una funzione esportata.

Al fine di risolvere il problema ho creato un modulo separato che sembra come dopo

import {LandingPageComponent} from '../landing-page/landing-page.component'; 
import {DashboardComponent} from "../dashboard/dashboard.component"; 
import {SessionService} from "../core/services/session.service"; 

const exportedComponent = SessionService.isAnonymous() ? LandingPageComponent : DashboardComponent; 

export default exportedComponent; 

e poi basta solo bisogno di importare il modulo fornito da quella "fabbrica" ​​

import LandingPageComponent from './factories/landing-factory.component'; 
const appRoutes: Routes = [ 
    { 
    path: '' , 
    component: LandingPageComponent 
    }, 
]