Angular × Template × 認証機能もどきを追加してみた。

Goal

anguar-material-templateを参考に、Angular13に対応したシンプルなテンプレートを用意する。(上記TemplateはAngular８に対応。) 今回は、認証機能を追加する。
特に、AuthGuardを初めて使ったのが今回のポイント。

Repository

ソースコード置き場はここ

手順

Sharedディレクトリにサービスディレクトリを作成する。
サービスディレクトに、認証サービスを追加する。このサービスでは、Chromeから以外のアクセスを拒否する処理を実装する。
Angular-CanActivateを使って、認証が成功したときのみHome-Dashboardを表示するようにルーティングを設定する。

　やってみた

サービスディレクトリとサービスの作成

ng g s shared/services/auth

上記コマンドを実行してサービスクラスを作成する。このサービスは、ブラウザの種類を判定して、検出されたブラウザの列挙体を返す。　　 サービスを作成したら、Moduleに定義する。今回は、SharedModuleに作成したので、SharedModuleのProvider配列に追加する。

@NgModule({
  declarations: [
    LayoutComponent,
    UnauthorizedLayoutComponent
  ],
  providers:[
    AuthService, //ここ
    AuthGuard
  ],
  imports: [
    RouterModule,
    CommonModule,
    MaterialModule,
    FormsModule,
  ]
})
export class SharedModule { }

CanActiveインターフェースを実装する

AuthGuardを利用するため、CanActiveインターフェースを実装する。今回は、Chrome以外のブラウザが検出された場合認証が失敗したことにする. 初めに、ngコマンドでクラスを作成し・・・

ng g s shared/services/router/auth-guard

CanActiveインターフェースを継承・実装する。Chrome以外のブラウザでアクセスした場合は、Unauthorizedコンポーネントにナビゲートされる処理を設定する。Chromeの場合はTrueを返して処理を終了する。

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    var browserName = this.authService.detectBrowserName();
    if (browserName === BrowserEnum.Chrome) {
      return of(true);
    } else {
      this.router.navigate(["unauthorized"]);
      return of(false);
    }
  }

この時、先ほど作成したAuthServiceをDependInjectionするのを忘れずに行う。

Routerの設定を変更する

Home画面に遷移する際にAuthGuardクラスのCanActivateが呼び出されるように設定を追加する。今回は、Homeコンポートの配下すべてのアクセスを一括で管理したいため、app-routing.module.tsの設定を変更する。同時に、Unauthorizedコンポートへのルーティングも設定する。

const routes: Routes = [
  {
    path: "unauthorized", 
    component: UnauthorizedLayoutComponent,
    children:[
      { path: '', component: UnauthorizedComponent }
    ]
  },
  {
    path: 'home',
    canActivate: [AuthGuard],
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  {
    path: '**',
    redirectTo:'home'
  }
];