【Angularアプリケーション開発 #11】guard

はじめに

guardを実装しました。
以前、ログインの記事でもguardの実装を書いていましたが、動作がおかしかったので今回変更しました。

guardの実装

authCheck()で非同期でhttp通信を行い、jsonデータを受け取っています。{"cookieValidFlag":false}
canActivate()では受け取ったjsonデータをboolean型に変換して返却しています。
cookieValidFlagがfalseであれば、loginページにリダイレクトして、cookieValidFlagがtrueであれば指定したページに遷移します。
mapはストリームから新しいストリームを生成するっぽいです。
イメージとしては、非同期で受け取ったデータの型を変換して新しいデータを生成することができるといった感じです。

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree ,Router} from '@angular/router';
import { Observable, pipe } from 'rxjs';
import { environment } from './../../environments/environment';
import { forkJoin, timer, of} from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators'

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    private router: Router,
    private http: HttpClient
  ) {}

  flg:boolean;
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.authCheck().pipe(map(data =>{
      return data.cookieValidFlag
    }));
  }

  authCheck(): Observable<any> {
    return this.http.get<any>(environment.apiUrl + '/sessionload',{ withCredentials: true})
      .pipe(
        tap(data => console.log(data)),
        map(data =>{
          if(!data.cookieValidFlag){
            this.router.navigate(['login']);
          }
          return data;
        })
      );
  }

  private handleError<T>(operation = 'operation',result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      return of(result as T);
    }
  }
  
}