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的Injectable Service正在处理路由器。如果没有身份验证，用户将被重定向到/身份验证，无论路由是什么，如果他已登录，则重定向到/ dashboard。

问题是如果我想重新加载/排行榜页面，它每次都会重定向到/ dashboard，它也不应该是身份验证服务的工作。

我已经尝试过，使用This guide来理解警卫，这使我能够通过/ dashboard和/ leaderboard处理基本导航，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

如果您的目标是检查路由器是否知道所提供的路由，请使用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 });

Answer 2

我太深了，我只需要在我的警卫中添加更多验证：

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

使用重定向，回调和未知路径处理警卫

2 个答案: