0

对于一个项目，我有一个带有这些可用路径的路由器：

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

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

我已经尝试过，使用本指南来了解守卫，这使我能够处理通过 /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 {
}
4

2 回答 2

0

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

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']);
  }
}
于 2017-08-31T12:08:58.237 回答
0

如果您的目标是检查提供的路由是否为路由器所知，请使用 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 });
于 2017-08-31T11:07:04.533 回答