使用重定向、回调和未知路径处理 Guards

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 的可注入服务正在处理路由器。如果用户未通过身份验证，则无论路由是什么，都将重定向到 /authentication，如果他已登录，则重定向到 /dashboard。

问题是如果我想重新加载 /leaderboard 页面，它每次都会重定向到 /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']);
  }
}

使用重定向、回调和未知路径处理 Guards

Handling Guards with redirections, callbacks and unknown paths

angular

redirect

routing

angular-router-guards