與重定向，回調和未知的路徑

Question

對於項目處理逆天，我有那些可用的路徑路由器：

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

的AuthenticationComponent的注射服務正在處理的路由器。如果用戶沒有通過身份驗證，將被重定向到/身份驗證，無論路由是什麼，以及/ dashboard是否已登錄。

問題是如果我想重新加載/排行榜頁面，它每次都重定向到/儀表板，它也不應該是認證服務的工作。

我試過了，使用This guide來理解守衛，它允許我處理/儀表板和/排行榜的基本導航，Auth0的回調以及刷新，但是在訪問我的登錄頁面時已經被驗證，它不重定向，具有未知路徑的相同行爲。

有沒有辦法讓我檢查路由器是否知道提供的路由，並且在用戶登錄時是否正確重定向？

了警惕：

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']); 
    } 
    } 
} 

我現在的路由器：

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

我去太深了，我只需要我的守護添加多個驗證：

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

如果你的目標是檢查所提供的路線是已知的路由器，使用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"); 
    } 
    } 

如果您需要路由的URL，請檢查Router.url屬性。打開跟蹤，檢查控制檯上的輸出：

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