웹사이트 검색

Angular 라우터에서 Route Guard를 사용하는 방법


소개

Angular 라우터의 내비게이션 가드를 사용하면 내비게이션의 특정 부분에 대한 액세스를 허용하거나 제거할 수 있습니다. 또 다른 경로 가드인 CanDeactivate 가드를 사용하면 사용자가 실수로 변경 사항을 저장하지 않고 구성 요소를 떠나는 것을 방지할 수 있습니다.

참고: 이와 같은 클라이언트 측 경로 보호는 보안 기능이 아닙니다. 그들은 영리한 사용자가 보호된 경로에 도달하는 방법을 알아내는 것을 막지 않을 것입니다. 이러한 보안은 서버에서 구현되어야 합니다. 대신 앱의 사용자 경험(UX)을 개선하는 방법을 의미합니다.

사용 가능한 4가지 유형의 라우팅 가드는 다음과 같습니다.

  • CanActivate: 경로를 활성화할 수 있는지 여부를 제어합니다.
  • CanActivateChild: 경로의 하위 항목을 활성화할 수 있는지 여부를 제어합니다.
  • CanLoad: 경로를 로드할 수 있는지 여부를 제어합니다. 이는 지연 로드되는 기능 모듈에 유용합니다. Guard가 false를 반환하면 로드되지 않습니다.
  • CanDeactivate: 사용자가 경로를 떠날 수 있는지 여부를 제어합니다. 이 가드는 사용자가 브라우저 탭을 닫거나 다른 주소로 이동하는 것을 막지 않습니다. 애플리케이션 자체 내에서의 작업만 방지합니다.

CanActivate 경로 보호 사용

라우트 가드는 필요한 라우트 가드 인터페이스를 구현하는 클래스로 가장 자주 구현됩니다.

사용자가 인증된 경우 auth 서비스에 요청하는 CanActivate 경로 보호가 있는 예를 살펴보겠습니다.

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

@Injectable()
export class CanActivateRouteGuard implements CanActivate {
  constructor(private auth: AuthService) {}

canActivate 메서드를 선언하여 CanActivate 인터페이스를 구현하는 방법에 주목하십시오. 이 메서드는 현재 경로에 대한 정보가 필요한 경우 선택적으로 ActivatedRouteSnapshotRouterStateSnapshot에 액세스할 수 있습니다.

이 예에서 canActivate는 사용자가 인증되었는지 여부에 따라 부울을 반환하지만 관찰 가능 항목 또는 부울로 확인되는 약속을 반환할 수도 있습니다.

이를 이용하기 위해서는 루트가드가 서비스처럼 제공되어야 한다.

앱 모듈의 공급자에 추가해 보겠습니다.

// ...
import { AppRoutingModule } from './app-routing.module';
import { CanActivateRouteGuard } from './can-activate-route.guard';

import { AuthService } from './auth.service';

마지막으로 라우팅 구성의 일부로 가드를 추가하고 싶을 것입니다.

다음은 라우팅 모듈을 사용한 예입니다.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home.component';
import { DashboardComponent } from './dashboard.component';
import { CanActivateRouteGuard } from './can-activate-route.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard',
    component: DashboardComponent,
    canActivate: [CanActivateRouteGuard]
  }
];

이제 인증된 사용자만 /dashboard 경로를 활성화할 수 있습니다.

경로 정의에서 일련의 가드를 제공하는 방법에 주목하십시오. 즉, 단일 경로에 대해 여러 가드를 지정할 수 있으며 지정된 순서대로 평가됩니다.

CanLoadCanActivateChild 구현은 비슷한 방식으로 수행됩니다.

참고: CanLoad 인터페이스는 현재 라우터 상태 또는 활성화된 경로에 대한 액세스 권한이 많지 않습니다.

이것으로 CanActivate 경로 보호에 대한 예제를 마칩니다.

CanDeactivate 경로 보호 사용

CanDeactivate 가드는 비활성화할 구성 요소를 제공해야 한다는 점에서 구현에 약간의 차이가 있습니다. 이를 통해 문제의 구성 요소를 조사하여 저장되지 않은 변경 사항과 같은 것이 있는지 확인할 수 있습니다.

CanDeactivate 경로 보호가 있는 예를 살펴보겠습니다.

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

import { DashboardComponent } from './dashboard.component';

위의 예에서는 대시보드 구성 요소 클래스에 저장되지 않은 변경 사항이 있을 때마다 true가 되는 unsavedChanges라는 멤버가 있다고 가정합니다. 저장되지 않은 변경 사항이 없거나 사용자가 확인하지 않는 한 경로는 비활성화되지 않습니다.

이것으로 CanDeactivate 경로 보호에 대한 예제를 마칩니다.

결론

이 자습서에서는 CanActivateCanDeactivate와 같은 Angular의 경로 보호에 대해 배웠습니다.

Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하십시오.