Angular：RouterとGuardのサンプル

前書

• 個人勉強メモ、ご参考まで
• 参照先：https://github.com/codecraft-tv/angular-course/tree/current/12.routing/

RouterとGuard一緒に説明

• TSの部分を説明する

app.module.ts

import { NgModule } from '@angular/core';

// Router、Guard関連モジュールをインポート
import { RouterModule, Routes, CanActivateChild, CanActivate } from '@angular/router';

// 自作のComponentをインポート
import { LayoutComponent } from './layout/layout.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

// ChildのGuard用クラスを実装
class AlwaysAuthChildrenGuard implements CanActivateChild {
  canActivateChild() {
    console.log("AlwaysAuthChildrenGuard");
    return true;
  }
}

// 一般なGuard用クラスを実装
class Guard1 implements CanActivate {
  canActivate() {
    console.log("Guard1");
    return true;
  }
}
class Guard2 implements CanActivate {
  canActivate() {
    console.log("Guard2");
    return true;
  }
}

// Routerデータ
const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  {
    path: '',
    component: LayoutComponent,
    canActivateChild: [AlwaysAuthChildrenGuard], // ChildのGuardを設置
    children: [
      { path: 'home', component: HomeComponent, canActivate: [Guard1] }, // 一般なGuardを設置
      { path: 'login', component: LoginComponent, canActivate: [Guard2] }, // 一般なGuardを設置
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  declarations: [
    AppComponent,
    LayoutComponent,
  ],
  // DIでロードする
  providers: [
    AlwaysAuthChildrenGuard,
    Guard1,
    Guard2
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

• HTMLの部分以下です。

htmlのテンプレート

<router-outlet></router-outlet>

• 実行結果は、CanActivateChildが先に実行され、その後CanActivateが実行
  AlwaysAuthChildrenGuard
  Guard2

追記：Guardで遷移

• 差分は下記です。

app.module.ts

import { NgModule, Injectable } from '@angular/core';
import { RouterModule, Routes, Router, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivateChild, CanActivate } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({providedIn: 'root'})
class Guard1 implements CanActivate {
  constructor(private router: Router) { }
  
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      console.log("Guard1");
      return this.router.navigate(['login']);
    }
}