webentwicklung-frage-antwort-db.com.de

Laden Sie das Modul bedingt auf den leeren Pfad im Angular-Router

Ich versuche, die Startseite meiner App für Besucher zu laden, die nicht authentifiziert sind.

const routes: Routes = [
    { path: '', loadChildren: './home/home.module#HomeModule' }
...

Authentifizierte Benutzer sollten ihren Feed über dieses Modul auch auf dem leeren Pfad erhalten.

{ path: '', loadChildren: './feed/feed.module#FeedModule', canActivate: [IsAuthenticationGuard] },
{ path: '', loadChildren: './home/home.module#HomeModule', canActivate: [NoAuthenticationGuard] },

Ich würde erwarten, dass IsAuthenticationGuard fehlschlägt und die Standard-Home-Komponente lädt.

Stattdessen wird das Feed-Modul-Paket (in der Registerkarte "Netzwerk" angezeigt) heruntergeladen, es wird jedoch nichts in den Router-Ausgang geladen. Sehr verwirrend. 

Wie kann ich bedingtes Routing (basierend auf Wachen oder auf andere Weise) auf dem leeren Pfad durchführen?

Update: Hier sind die Wachen auf Anfrage

@Injectable()
export class IsAuthenticationGuard implements CanActivate {
    constructor(
        private authenticationService: AuthenticationService
    ) { }

    public canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> {
        return this.authenticationService.isAuthenticated.pipe(take(1), map((isAuthentication) => {
            return isAuthentication;
        }));
    }
}

Ich habe nach der neuen urlTree recherchiert und es ist cool, dass Sie jetzt über die Route statt innerhalb der Wache umleiten können. Allerdings scheinen Weiterleitungen nicht anwendbar zu sein, wenn Sie versuchen, dieselbe Route mit einem anderen Modul zu verwenden. Plz korrigieren Sie mich, wenn es einen Weg gibt.

7
TR3B

Es gibt ein paar Dinge, die Sie meiner Meinung nach falsch machen.

  1. Sie sollten nicht zwei Routen mit demselben Pfad definiert haben.
  2. In Ihrer Wache ist die Karte sinnlos. Solange Ihre Servicemethode Observable<boolean> zurückgibt, müssen Sie ihren Wert nicht zuordnen.
  3. Auch wenn Sie nicht true zurückgeben, müssen Sie zum Pfad des anderen Moduls navigieren. Dazu müssen Sie eine andere Logik implementieren, um zu sagen, ob der Benutzer angemeldet ist oder nicht.

Werfen Sie einen Blick auf die offizielle Anleitung zur Winkelführung hier . Es gibt viele nützliche Informationen, die Ihnen helfen werden. Besonders diese:

EDIT 2018/12/27

Wenn also die Frage ist, wie zwei Feature-Module im gleichen Pfad bedingt geladen werden sollen,

die Antwort ist, nach meiner Erfahrung kann man das nicht.

3
bodorgergely

Ich glaube, dass das, was Sie erreichen wollen, durch Wachen nicht möglich ist. Angular durchsucht das Routen-Array von oben nach unten. Sobald eine Pfadübereinstimmung vorliegt, wird das entsprechende Modul/die entsprechende Komponente geladen. In Ihrem Fall ist { path: '', loadChildren: './feed/feed.module#FeedModule', canActivate: [IsAuthenticationGuard] } eine URL-Pfadübereinstimmung. Angular lädt also das Feed Module, zeigt jedoch nichts an, wenn der Guard einen Fehler zurückgibt. Die URL-Übereinstimmung für die darunter liegende Zeile wird nicht einmal geprüft.

Stattdessen können Sie Folgendes tun: 

  1. ändere die Routen als { path: '', loadChildren:'./home/home.module#HomeModule', canActivate: [IsAuthenticationGuard] },
  2. navigieren Sie zum Feed-Modul, wenn der Benutzer erfolgreich authentifiziert wurde. Folgen Sie diesem Thread , um weitere Hinweise zu erhalten.

Ich hoffe, das löst deinen Zweck.

0
M M