gardes AGILITY avec, redirections et callbacks des chemins inconnus

Question

Pour un projet, j'ai un routeur avec ces chemins disponibles:

const appRoutes: Routes = [ 
    {path: '', component: AppComponent}, 
    {path: 'dashboard', component: DashboardComponent}, 
    {path: 'leaderboard', component: LeaderboardComponent}, 
    {path: 'authentication', component: AuthenticationComponent}, 
    {path: '**', redirectTo: '/authentication', pathMatch: 'full} 
]; 

Le Service Injectable du AuthenticationComponent manipulait le routeur. L'utilisateur non authentifié serait redirigé vers/authentication, quelle que soit la route, et vers/dashboard s'il était connecté.

Le problème est que si je veux recharger la page/leaderboard, il redirige vers/dashboard à chaque fois, et il ne devrait pas être le travail du service d'authentification aussi bien. J'ai essayé, en utilisant This guide, de comprendre les gardes, ce qui m'a permis de gérer la navigation de base via/dashboard et/leaderboard, le callback de Auth0 et l'actualisation, mais en accédant à ma page de connexion tout en étant déjà authentifié , il ne redirige pas, même comportement avec des chemins inconnus.

Y a-t-il un moyen pour moi de vérifier si l'itinéraire fourni est connu par mon routeur et rediriger correctement si l'utilisateur est connecté ou pas?

Ma Garde:

import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router'; 
import {AuthenticationService} from './component/authentification/authentication.service'; 
import {Injectable} from '@angular/core'; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private authService: AuthenticationService, 
       private router: Router) { 
    } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    console.log(route, state); 
    this.authService.handleAuthentication(); 
    if (this.authService.isAuthenticated()) { 
     return (true); 
    } else { 
     this.router.navigate(['/authentication']); 
    } 
    } 
} 

Mon routeur actuel:

import {NgModule} from '@angular/core'; 
import {RouterModule, Routes} from '@angular/router'; 

import {DashboardComponent} from './component/dashboard/dashboard.component'; 
import {LeaderboardComponent} from './component/leaderboard/leaderboard.component'; 
import {AuthenticationComponent} from './component/authentification/authentication.component'; 
import {AppComponent} from './app.component'; 
import {AuthGuard} from "./app-routing.guard"; 

const appRoutes: Routes = [ 
    {path: '', canActivate: [AuthGuard], redirectTo: '/dashboard', pathMatch: 'full'}, 
    {path: 'dashboard', canActivate: [AuthGuard], component: DashboardComponent}, 
    {path: 'leaderboard', canActivate: [AuthGuard], component: LeaderboardComponent}, 
    {path: 'authentication', component: AuthenticationComponent}, 
    {path: '**', canActivate: [AuthGuard], redirectTo: '/authentication'} 
]; 

@NgModule({ 
    imports: [ 
    RouterModule.forRoot(
     appRoutes 
    ) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 

export class AppRoutingModule { 
} 

Answer 1

Je suis allé trop profond, je ne devais ajouter d'autres vérifications dans mon garde:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    this.authService.handleAuthentication(); 
    if (this.authService.isAuthenticated()) { 
    if (state.url === '/authentication') { 
     this.router.navigate(['/dashboard']); 
    } else { 
     return (true); 
    } 
    } else if (state.url === '/authentication') { 
    return (true); 
    } else { 
    this.router.navigate(['/authentication']); 
    } 
} 

Answer 2

Si votre objectif est de vérifier si l'itinéraire prévu est connu du routeur, utilisez l'événement RoutesRecognized:

export class AppComponent { 

    constructor (private router: Router){ 
    this.router.events.subscribe(
     (event) => this.handleRouterEvents(event) 
    ); 
    } 

    handleRouterEvents(event){ 
    if (event instanceof RoutesRecognized){ 
     console.log("The user provided the known route"); 
    } else{ 
     console.log("The user provided unknown route"); 
    } 
    } 

Si vous avez besoin de l'URL de la route, vérifiez la propriété Router.url. Allumez le tracé et vérifiez la sortie sur la console:

export const routing = RouterModule.forRoot(routes, 
    { enableTracing: true });