Routage et gardes angulaires

Question

Pour mon application web Angular, j'essaie de réaliser un processus de routage de base comme suit ;

1. Lorsque l'application est lancée, la page d'ouverture doit être la page de connexion.
2. Lorsque l'utilisateur se connecte, la prochaine page affichée doit être la page d'atterrissage.
3. Si la session expire, l'utilisateur doit être redirigé vers la page de connexion.
4. Si l'utilisateur essaie d'ouvrir une page inconnue, il doit être redirigé vers une page 404.

Voici l'extrait de code de mon " app-routing.module.ts " ;

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'landing', component: LandingComponent, canActivate: [AuthGuard]},
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent, pathMatch: 'full' }
];

C'est mon " login.component.ts " ;

this.authService.login(username, password).subscribe({
  next: data => {
    ...
    this.router.navigate(['landing']);
  },
  error: err => {
    ...
  }
});

Et voici le " auth.guard.ts " ;

 canActivate(): boolean {
    if (!this.tokenService.getToken()) {
      this.router.navigateByUrl('login');
      return false;
    }
    return true;
  }

Voici les problèmes auxquels je suis confronté ;

1. Lorsque je lance l'application (localhost:4200), elle me redirige vers la page d'atterrissage, et comme je n'ai pas de session, AuthGuard me redirige ensuite vers la page de connexion, pour finir par aller à "http://localhost:4200/". connexion ". Tout va bien, mais lorsque je recharge cette page, elle suit à nouveau le même processus et aboutit à "http://localhost:4200/". login/login ". Je m'attends à ce que la page de connexion soit à nouveau affichée avec l'URL "http://localhost:4200/". connexion ".
2. Lorsque l'utilisateur se connecte, il est redirigé vers la page d'atterrissage mais l'url est maintenant "http://localhost:4200/". login/atterrissage Je m'attendrais à ce que ce soit "http://localhost:4200/". atterrissage "à la place.
3. Lorsque la session expire, elle redirige vers la page de connexion mais l'url est "http://localhost:4200/". atterrissage/connexion Je m'attendrais à ce que ce soit "http://localhost:4200/". connexion "à la place.
4. Enfin, lorsque j'essaie d'aller sur une page inconnue (disons /inconnue), il redirige vers "http://localhost:4200/". inconnu/atterrissage "et affiche la page d'atterrissage, au lieu de la page 404.

Je pense donc avoir mal compris certaines parties du routage, mais je n'ai pas encore trouvé de réponse. Avez-vous des idées pour résoudre mes problèmes ?

Answer 1

Vous devez utiliser / avant le parcours.

Sur "login.component.ts"

this.router.navigate(['/landing']);

Sur "auth.guard.ts"

this.router.navigateByUrl('/login');

En savoir plus sur chemin de liaison relatif .