Angular 라우팅 요청 차단하는 방법

오늘은

Angular에서 제공하는 CanDeactivate를 사용해 보았다.

CanDeactivate는 현재 컴포넌트에서 다른 컴포넌트로 라우팅을 요청할 때, 임의의 조건에 따라 라우팅을 승인하거나 차단할 수 있게 해주는 기능이다.

1. can-deactivate-guard.service.ts 생성

can-deactivate-guard.service.ts 파일을 생성한다.

import {Observable} from "rxjs";
import {ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot} from "@angular/router";

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ) : Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate();
  }
}

2. module 수정

module.ts의 providers에 canDeactivate를 추가한다.

  providers: [
	...
    CanDeactivateGuard
  ]

3. route 수정

    {
      path: '',
      ...
      canDeactivate: [CanDeactivateGuard]
    },

4. component.ts에 canDeactivate 함수 생성

canDeactivate에서 리턴되는 결과에 따라 라우팅 요청이 성공하거나 취소된다.

  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (this.infoChange) {
      return confirm('Message');
    } else {
      return true;
    }
  }

5. custom dialog 사용

아래 코드에서는 Material dialog를 사용했다.
dialog close 이벤트에 boolean 값을 리턴한다.

  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (this.infoChange) {
      const dialogRef = this.dialog.open(ConfirmRouteComponent);
      return dialogRef.afterClosed();
    } else {
      return true;
    }
  }