[typescript] Angular 가드

26 Dec 2023

typescript

Angular 가드 종류

CanActivate: 사용자가 라우트에 접근할 수 있는지를 결정하는 데 사용됩니다.
CanActivateChild: 자식 라우트에 대한 접근 권한을 제어하는 데 사용됩니다.
CanDeactivate: 페이지를 떠날 때 사용자에게 확인 메시지를 표시하거나 페이지를 떠나기를 방지할 수 있습니다.
CanLoad: Lazy loading된 모듈에 대한 접근을 제어하는 데 사용됩니다.

Angular 가드 사용 방법

가드를 생성하려면, @Injectable 데코레이터를 사용하여 해당 인터페이스를 구현하는 클래스를 생성해야 합니다. 그 후 앵귤러 모듈의 providers 배열에서 해당 가드를 등록해야 합니다.

예를 들어, 다음은 CanActivate 인터페이스를 구현한 가드의 예시입니다.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

위의 예시에서 canActivate 메서드는 사용자가 인증되었는지 여부를 확인하고, 그에 따라 라우트 접근을 허용하거나 거부할 수 있습니다.

이렇게 생성된 가드는 라우트 정의에 사용할 수 있습니다.

위에서 생성된 AuthGuard의 예시를 라우트 정의에서 사용하는 방법은 다음과 같습니다.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

위의 예시에서 canActivate: [AuthGuard]는 home 경로에 대한 접근을 AuthGuard를 통해 제어함을 나타냅니다.

Angular 가드는 라우팅 및 페이지 접근 제어에 매우 유용하며, 사용자의 경험과 보안을 개선하는 데 도움이 됩니다.