Angular Guard를 활용한 인터셉터 구현

 

 

앵귤러에서는 Guard라는 인터페이스를 통해서 통상 서버에서 사용하던 인터셉터 기능을 사용 할 수 있게 해준다.

Guard를 사용하기위해서는 직접 코딩해도 상관없지만 명령어를 통해서 쉽게 만들 수 있다.

ng g guard angular-aop

만들어진 클래스는 아래처럼 기본적으로 세팅되어 생성된다.

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }
}

값을 받는 파라미터랑 되돌려주는 객체가 다소 복잡해보인다.

잘 보면 return하는 값이 보이는데 해당 return 부분에 원하는 조건절을 넣어주면 된다.

로그인 하면서 특정 정보를 localStorage라는 곳에 넣어서 보관해도 되고 해당 Guard에서 서버로 request를 보내어 정보를 확인하는 방법등 방법은 많다.

아무래도 속도나 효율성을 본다면 localStorage가 좀더 좋지 않나싶다.

​

아무튼 조금 더 내용을 추가해본 소스코드를 살펴보면,

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { SessionService } from './session.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router : Router, private session : SessionService ){
     // 생성자를 통해서 라우터객체와 사용자가 구현한 세션서비스를 받아온다.
     // 세션서비스는 사용자가 만든 서비스이다.
  }

  canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(this.session.getInfor() == null){
      console.log(this.session);
      alert("로그인해 주세요.");
      this.router.navigate(['welcome'],{ queryParams: { 원하는파라미터등등 } });      
      return false;
    }
    return true;
  }
}

위 소스코드는 세션서비스라는 사용자 정의 서비스를 통해서 인터셉터 역할을 하는 부분이다.

사용자가 만든 세션서비스는 아래와같다.

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

@Injectable({
  providedIn: 'root'
})
export class SessionService  {
  constructor() { 

  }
  getInfor() {
    var locTime = localStorage.getItem('time');
    if(locTime == undefined || locTime == null || locTime.length == 0){
      return null;
    }
    const time1 = new Date(locTime);
    const time2 = new Date();
    let gap = Math.abs((time2.getTime() - time1.getTime())   / (60 * 1000)); //분
    if(gap >= 60){  //세션 만료
      localStorage.setItem('id',null);
      localStorage.setItem('time',null);
      return null;
    }
    const res = {
      id : localStorage.getItem('id'),
      time : localStorage.getItem('time')
    };
    return res;
  }
  setInfor (inf){
    localStorage.setItem('id',inf.id);
    localStorage.setItem('time',inf.time);
    console.log('set ok');
  }
}

최종적으로 모듈에 등록을 해야 정상적으로 작동한다.

..Import 생략

const router : Routes = [  
  {path : 'main' , component : 적용시킬 컴포넌트명, canActivate : [AuthGuard]},
]

@NgModule({
  declarations: [
..생략
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(router,{enableTracing:false}),
  ],
  providers: [SessionService, AuthGuard],  //제공하기
  bootstrap: [AppComponent]
})
export class AppModule { }