12

別のルートをナビゲートしようとすると問題が発生します。

2 つの異なるルート モジュールがあります。

app.routes.ts :

のみを含むLoginPage:

export const routes: Routes = [
  {
    path: 'login',
    component: LoginPageComponent,
    canActivate: [PreventLoggedInAccess]
  },
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'login'
  }
];

export const Routing: ModuleWithProviders = 
    RouterModule.forRoot(routes, { useHash : true });

PreventLoggedInAccess.canActivateを使用/appすると、ユーザーが既にログインしている場合、プレフィックスと子ルートを使用してログイン セクションにリダイレクトされますhome。次のように定義されています。

canActivate(): boolean {
  if (!this._authService.isAuthenticated()) {
      return true;
  }
  this._router.navigate(['/app/home']);
  return false;
}

pages.routes.ts :

/appユーザーがログインしている場合にのみアクセスできるすべてのサブルートを含みます。これは次を使用して実現されAuthGuardService.canActivateChildます。

export const pageRoutes: Routes = [
  {
    path: 'app',
    component: PagesComponent,
    canActivateChild: [AuthGuardService],
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomePageComponent },
      { path: 'contents', component: ContentsComponent },
    ]
  }
];

export const Routing: ModuleWithProviders = RouterModule.forChild(pageRoutes);

/loginユーザーがログインしていない場合にリダイレクトする後者を使用します。次のように定義されます。

canActivateChild(): boolean {
  if (this._authService.isAuthenticated()) {
      return true;
  }
  this._router.navigate(['login']);
  return false;
}

app/homeからにナビゲートすると、2回ナビゲートapp/contentsした後にのみに移動します。ContentsComponentしたがって、2 回実行this._router.navigate(['app/components']);すると機能し、1 回だけ実行すると、ルートが からapp/homeに1app/routeミリ秒の間変更されて に戻りますがapp/home、2 回実行するとルートが変更されます。一方、私が入っapp/contentsてナビゲートしようとすると、app/homeルートがうまく変わります。

isAuthenticated正常に動作します。どちらの authguards も問題なく動作するため、appログインしていないときに子ルートにアクセスしようとすると、ログインにリダイレクトされ、ログインしてloginいるときにアクセスしようとすると、にリダイレクトされapp/homeます。

少しデバッグすることができたので、次のフローに気付きました。

  • 最初の試行 - app/home-> app/contents:
    • navigate(['app/contents'])と呼ばれる
    • PreventLoggedInAccess.canActivateと呼ばれる
    • AuthGuardService.canActivateChildと呼ばれる
  • 2 回目の試行 - app/home-> app/contents:
    • navigate(['app/contents'])と呼ばれる
    • AuthGuardService.canActivateChildと呼ばれる

もちろん、予想される動作は 2 番目のものです。

編集

this._router.navigate([/app/home]);から削除PreventLoggedInAccess.canActivateすると問題が解決します

canActivate(): boolean {
  if (!this._authService.isAuthenticated()) {
      return true;
  }
  return false;
}

しかし、それでも、子供に接続されているにもかかわらず、子供に移動するときに呼び出される理由がわかりませんか? 最初の試行でのみ呼び出されるのはなぜですか?PreventLoggedInAccess.canActivateappAuthGuardService.canActivateChild

4

1 に答える 1