[angular] 권한 제어 구성

26 Dec 2023

angular

Angular 애플리케이션에서 권한 제어는 중요한 보안 요소입니다. 사용자가 특정한 기능을 사용하거나 페이지에 접근할 때 권한을 확인하는 것은 매우 중요합니다. Angular에서는 라우터 가드를 사용하여 권한 제어를 구성할 수 있습니다.

라우터 가드

라우터 가드는 Angular에서 제공하는 기능 중 하나로, 특정 경로로의 접근 권한을 제어하는 데 사용됩니다. 이를 통해 사용자가 특정 페이지에 접근하기 전에 권한을 확인할 수 있습니다.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // 권한 확인 로직을 구현합니다.
    if (로그인 상태가 유효한지 확인) {
      return true; // 권한이 있을 경우 true 반환
    } else {
      this.router.navigate(['/login']); // 권한이 없을 경우 로그인 페이지로 이동
    }
  }
}

위의 코드는 AuthGuard 라는 클래스를 정의하고, CanActivate 인터페이스를 구현하여 라우터 가드를 생성하는 예시입니다. canActivate 메서드 내에서 권한 확인 로직을 구현하여 사용자의 권한에 따라 페이지 이동 여부를 결정합니다.

라우터 설정

라우터 설정에서는 위에서 정의한 라우터 가드를 사용하여 각 경로에 대한 권한을 설정할 수 있습니다.

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  // ...
];

위의 코드에서는 DashboardComponent와 ProfileComponent에 대한 접근 권한을 AuthGuard를 통해 설정하고 있습니다. 사용자가 해당 경로로 이동하려고 할 때 라우터 가드가 작동하여 권한 여부를 확인하고 처리합니다.

이처럼 Angular에서 라우터 가드를 사용하여 애플리케이션의 권한 제어를 구성할 수 있습니다.

관련 링크: Angular 라우터 가이드

이렇게 Angular에서 권한 제어를 구성할 수 있습니다.