[angular] 가드 구성

26 Dec 2023

angular

Angular 애플리케이션에서 사용자의 권한과 접근 권한을 관리하려면 가드를 구성해야 합니다. 가드는 라우터를 통해 접근하는 컴포넌트의 접근 권한을 제어하고, 필요한 조건을 확인합니다.

가드 구성

CanActivate 가드

CanActivate 가드는 라우터가 활성화되기 전에 실행되며, 사용자의 특정 권한 또는 조건을 만족하는지 확인합니다.

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

@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;
    }
  }
}

CanActivateChild 가드

CanActivateChild 가드는 자식 라우터가 활성화되기 전에 실행되며, 부모 라우터의 가드와 유사하게 동작합니다.

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

@Injectable()
export class AuthGuard implements CanActivateChild {

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

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

가드 등록

애플리케이션 모듈에서 가드를 등록해야 합니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

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

결론

가드를 구성하여 애플리케이션의 보안과 권한 관리를 쉽게할 수 있습니다. 애플리케이션의 각 라우트에 필요한 보안 로직을 추가하여 사용자의 권한을 효과적으로 관리할 수 있습니다.

참고: Angular 공식 문서 - 라우터 가드