Angular guard 사용법[1]

[서론]

Angular를 사용하면 guard(이하 가드)라는 용어를 볼 수 있다. 가드란 영어사전에서 찾아보면 경비, 보호, 수비 라는 뜻으로 사용된다. Angular에서 가드는 Router를 사용하면서 접하게 되는데 간단하게 설명하면 라우팅 시 해당 url에 대한 접근을 제어할 때 사용하는 녀석이다. 기본적으로 가드에는 4가지의 가드가 있다. 아래에는 4가지 가드에 대한 설명이다.

• CanActivate 가드 : 해당 가드는 라우터에 대해서 접근이 가능한지 불가능 한지 접근 권한을 체크 하는 기능을 한다. 해당 가드를 사용 하고자 한다면 구현하고자 하는 가드 클래스에 CanActivate 인터페이스 모듈을 구현 해야하며 해당 인터페이스에는 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) :boolean | Observable<boolean> | Promise<boolean> 메소드가 있으며 해당 메소드 안에서 라우터 접근 로직을 구현 하거나 구현된 서비스를 사용 하면 된다.
• CanActivateChild가드 : 위에서 설명한 CanActivate 가드와 같은 역할을 하며 자식 라우터의 접근에 대한 판별을 하게 되며 CanActivateChild 인터페이스를 구현한다.
• CanDeactivate 가드 : 현재 라우터에서 다른 라우터로 변경되면서 현재의 라우터가 비활성 될 때 호출 되는 라우터 이며 CanDeactivate 인터페이스를 구현한다.
• Resolve 가드 : 라우트의 데이터를 가져와 컴포넌트에 제공하는 역할을 한다.

이번 포스팅에서는 CanActivate, CanActivateChild 두개의 가드를 사용 하는 법에서 포스팅을 하며 나머지 두개는 추후에 포스팅을 한다. 사용된 Angular 버전은 5 버전이다. 그리고 타입스크립트와 기본적인 Angular 설정에 대해서는 이해를 하고 있다고 생각 하고 포스팅을 진행한다.

[Guard 기본 구현]

import {Injectable} from '@angular/core'; import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild, Router} from '@angular/router'; import {ApiCallService} from "../service/ApiCallService"; import {HttpParams} from '@angular/common/http'; import {Observable} from 'rxjs/Rx'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/first'; /** * 서버로 부터 사용자의 접근 유무를 판정 받아서 화면에 대한 접근 결정을 내리는 가드 */ @Injectable() export class AuthGuard implements CanActivate, CanActivateChild { constructor(private apiCallService: ApiCallService, private router: Router) {} canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { this.urlCheck(state); return true; } canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { return this.urlCheck(state).map((auth) => { console.log(auth.access); if (auth.access) { console.log('authenticated'); return true; } this.router.navigateByUrl('/'); return false; }).first(); } private urlCheck(state: RouterStateSnapshot): Observable<any> { let accessUrl = state.url; let urlCheckParam = new HttpParams().set("checkUrl", accessUrl); return this.apiCallService.getHttpGetMethod("check", urlCheckParam); } }

위 에서 설명 했듯 해당 소스에서는  CanActivate, CanActivateChild를 구현하고 있다. 서버에서 접근하고자 하는 path에 대해서 권한 검사를 하고 결과를 전달 해주면 해당 값의 true/false를 끄집어 내어서 접근 유무를 결정 하게 된다. 여기서는 구체적인 서버의 구성 및 내용에 대해서는 생략한다. 궁금하신 분은 댓글을 달아 주시면 설명 해 드리겠다.

제일 위에 있는 canActivate에서는 별다른 서버 호출 없이 true라는 리턴 값을 이용해서 라우터 접근을 허용 하였으며 canActivateChild 메소드에서는 서버로 부터 접근 권한에 대한 결과 값을 받아서 사용하게 된다. 여기서 first()라는 메소드를 사용 하 였는데 해당 메소드는 observable에서 방출한 첫번째 항목만 방출하는 역할 하게 된다. 해당 메소드가 없다면 라우터에서는 어떤 값을 받았는지 모르게 된다. 

urlCheck에서 apiCallService의 상세한 설명은 생략하며 http 통신을 이용해 데이터를 받아오는 역할 을 한다. 

여기서 주의 할 점은 Angular 4.3.0이상 사용자는 http 통신 시 angular/common/http의 모듈을 사용하여 한다. 기존의 http를 사용할 수는 있지만 사용을 권장 하지는 않는다.

[Guard 기본 설정]

Angular를 사용하면서 프로젝트가 커지지 않으면 기본적으로 app.routing.module.ts에 사용할 가드를 추가 해주면된다.

import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; import {TestComponent} from './test/test.component'; import {AchievementEntryComponent} from './components/root/achievementEntry.component'; import {AuthGuard} from './guard/authGuard.service'; const routes: Routes = [ {path : "", component: AchievementEntryComponent , canActivate: [AuthGuard] , canActivateChild:[AuthGuard], children: [ { path: "test", component: TestComponent} ] } ] @NgModule({ imports: [ RouterModule.forRoot(routes)], exports: [ RouterModule ], providers: [AuthGuard] }) export class AppRoutingModule{}

해당 소스를 보게 되면 / path와 test path를 테스트 할 것이며 test 는 자식 라우트로서 canActivateChild메소드에 의해서 접근 유무를 판정 받게 된다. 

[동작 결과 확인]

로그인 한 사용자는 서버로 부터 위 그림과 같은 사용자 인증 토큰을 부여 받게 된다. 이 토큰은 라우터 가드에서 다시 접근 경로와 함께 보내어 접근 유무를 판정 하게 된다. 

인증 토큰이 유효 하여 true라는 결과 와 함께 /test 에 접근이 가능하다. 세션이 만료 되거나 지워질 경우 아래와 같이 false라는 로그와 함께 가드에서 정의 해놓은 루트 path로 자동으로 이동하게 된다. 

[결론]

앵귤러에서 제공하는 가드를 사용하면 경로에 대한 접근 혹은 경로에 존재하는 값, 현재 라우터에 대한 비활성 시 로직을 구현하여 사용 할 수 있다. 이번 포스팅에서는 짧게나마 가드에 대한 사용법에 대해서 알아 보았다.