Angular의 경로 가드

이 단원에서는 경로 가드를 사용하여 Angular 애플리케이션의 경로를 보호하는 방법을 설명합니다.

경로 가드란 무엇인가요?

경로 가드는 Angular에서 경로에 대한 액세스를 제어합니다. 중요한 경로나 제한된 경로를 보호할 때 유용합니다.

가드의 유형

• CanActivate: 경로를 활성화할 수 있는지 결정합니다.
• CanActivateChild: 자식 경로를 보호합니다.
• CanDeactivate - 경로를 벗어나기 전에 확인합니다.
• 데이터 사전 로드 - 경로를 활성화하기 전에 데이터를 미리 가져옵니다.

가드 만들기

Angular CLI를 사용하여 가드를 만드세요:

ng generate guard auth

canActivate() 구현하기

canActivate() 메서드는 경로에 대한 액세스를 제어합니다:

canActivate(): boolean {
  return true; // or false to block navigation
}

경로에서 가드 사용하기

라우팅 모듈의 경로에 가드를 추가하세요:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

CanDeactivate 가드

CanDeactivate는 특정 조건이 충족되지 않으면 경로를 벗어나지 못하게 합니다. 양식에 유용합니다:

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Resolve 가드

Resolve 가드는 경로가 로드되기 전에 데이터를 가져옵니다:

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

요약

경로 가드를 사용하여 Angular 앱의 탐색을 보호하고 향상시키는 방법을 배웠습니다. 계속 진행하세요!