라우트 가드(route guard)란 무엇인가요?

Question

Accepted Answer

**라우트 가드**는 **라우트로의/로부터의 내비게이션이 허용되는지**를 제어하는 함수입니다. 라우트가 활성화되기 전(또는 라우트를 떠나기 전)에 실행되어, 인증 검사, 권한 제어, "저장되지 않은 변경 사항" 알림을 가능하게 합니다. ## 가드 유형 ```text CanActivate → 사용자가 이 라우트에 진입할 수 있는가? (인증/권한 검사) CanActivateChild → 동일, 자식 라우트용 CanDeactivate → 사용자가 떠날 수 있는가? ("저장되지 않은 변경 사항이 있습니다") CanMatch → 이 라우트가 매칭되어야 하는가? (기능 플래그, 역할 기반) resolve → 라우트 활성화 전에 데이터를 사전 가져오기 ``` ## 함수형 CanActivate 가드 (최신 Angular) ```ts import { CanActivateFn, Router } from "@angular/router"; import { inject } from "@angular/core"; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isLoggedIn()) { return true; // 내비게이션 허용 } return router.createUrlTree(["/login"]); // 로그인으로 리디렉션 }; ``` 가드는 `true`(허용), `false`(차단), 또는 `UrlTree`(리디렉션)를 반환합니다. 최신 Angular는 오래된 클래스 기반 대신 **함수형 가드**(`inject()`를 사용하는 일반 함수)를 사용합니다. ## 라우트에 가드 적용하기 ```ts export const routes: Routes = [ { path: "dashboard", component: DashboardComponent, canActivate: [authGuard], // 이 라우트를 보호 }, { path: "admin", component: AdminComponent, canMatch: [roleGuard], // 관리자에게만 매칭 }, ]; ``` ## CanDeactivate — 의도치 않은 데이터 손실 방지 ```ts export const unsavedChangesGuard: CanDeactivateFn = (component) => { if (component.form.dirty) { return confirm("저장되지 않은 변경 사항이 있습니다. 그래도 떠나시겠습니까?"); } return true; }; ``` 이 고전적인 가드는 저장되지 않은 편집이 있는 폼에서 벗어나기 전에 사용자에게 경고합니다. ## 가드는 비동기일 수 있다 ```ts export const authGuard: CanActivateFn = () => inject(AuthService).checkSession().pipe(map(ok => ok || router.createUrlTree(["/login"]))); // 가드는 Observable 또는 Promise을 반환할 수 있다 ``` ## 왜 중요한가 가드는 Angular에서 접근 제어와 내비게이션 규칙을 강제하는 표준적이고 중앙집중적인 방법입니다. 인증된 라우트 보호, 역할/권한별 게이팅, 이탈 시 데이터 손실 방지, 데이터 사전 로딩(resolver)을 수행합니다. 이러한 검사를 (컴포넌트 곳곳에 흩어 놓는 대신) 가드에 두면 보안과 내비게이션 로직이 일관되고 선언적으로 유지됩니다. 보호된 라우트의 `authGuard`는 사실상 모든 실제 Angular 앱이 구현하는 것입니다.