it-swarm.com.de

Angular2-bedingtes Routing

Dies mag eine grundlegende Frage sein, aber gibt es in Angular2 eine Möglichkeit, bedingtes Routing durchzuführen? Oder würde das jemand außerhalb des Routers machen?

Ich weiß, dass ui-router die Möglichkeit dazu hatte, aber ich habe in Angular2s Router nichts Ähnliches gesehen

29
user3884414

update

Im neuen Router können stattdessen Guards verwendet werden https://angular.io/guide/router#milestone-5-route-guards

original (für den längst vergangenen Router)

Implementieren Sie den Lebenszyklus-Hook CanActivate wie hier gezeigt Lebenszyklus-Hooks im Angular2-Router und geben Sie false zurück, wenn Sie die Navigation verhindern möchten. Siehe auch https://angular.io/docs/ts/latest/api/router/CanActivate-var.html

9

Wie bereits erwähnt, sind Angular Route Guards eine gute Möglichkeit, bedingte Routen zu implementieren. Da das Angular Tutorial zu diesem Thema etwas wortreich ist, finden Sie hier eine kurze Zusammenfassung der Verwendung anhand eines Beispiels.

1. Es gibt verschiedene Arten von Wachen. Wenn Sie etwas von der Logik if (loggedIn) {go to "/dashboard"} else { go to "/login"} brauchen, dann suchen Sie den CanActivate- Guard. CanActivate kann gelesen werden als "Die neue Route X kann aktiviert werden, wenn alle Bedingungen Y erfüllt sind". Sie können auch Nebenwirkungen wie Weiterleitungen definieren. Wenn dies nicht zu Ihrer Logik passt, lesen Sie die Angular Tutorial-Seite, um die anderen Schutztypen anzuzeigen.

2. Erstellen Sie einen auth-guard.service.ts.

3. Füllen Sie den auth-guard.service.ts Mit folgendem Code aus:

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. Registrieren Sie den auth-guard.service.ts in Ihrem Routenmodul. Fügen Sie außerdem allen Routen, die Sie schützen möchten, das Schlüssel-Wert-Paar canActivate:[AuthGuardService] Hinzu. Es sollte ungefähr so ​​aussehen:

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 { }

Damit solltest du anfangen.

Hier ist eine minimalistische Demo: https://stackblitz.com/edit/angular-conditional-routing

38
bersling

Wenn Sie eine bestimmte Komponente rendern müssen, anstatt sie umzuleiten, können Sie Folgendes tun:

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

Ich habe dieses Beispiel als Zielseite verwendet, auf der Benutzer, die zuvor nicht angemeldet waren, entweder die Zielseite oder das Dashboard-Dashboard sehen konnten.

pdate Dieser Code wird in der Entwicklungsumgebung funktionieren, aber er wird nicht erstellt und Sie werden diesen Fehler bekommen:

ERROR in Error während der Template-Kompilierung von 'AppRoutingModule' Funktionsausdrücke werden von Dekoratoren in 'ɵ0' nicht unterstützt. 'Ɵ0' enthält den Fehler in src/app/app.routing-module.ts (14,25) eine exportierte Funktion.

Um das Problem zu beheben, habe ich ein separates Modul erstellt, das wie folgt aussieht

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;

und dann müssen Sie nur das von dieser "Fabrik" bereitgestellte Modul importieren

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