angular - interceptor 설정

 

API에 권한 인증 설정을 하게되면  header에 token 값을 넘겨줘야합니다.

 

번거롭게 API 요청을 할때마다 토큰 값을 header에 넣기 번거로우니 

 

interceptor를 통해 자동으로 header에 토큰 값을 넣도록 하겠습니다.

 

 

---

 

1. 파일 생성 및 작성

 

token.interceptor.ts

 파일을 만들어 줍니다.

제 파일 경로는 ClientApp/src/app/service/token.interceptor.ts 입니다

 

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AuthService } from './auth.service';

@Injectable()
export class headerInterceptor implements HttpInterceptor {

  constructor(public Auth: AuthService) {}

    
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    
    const token = JSON.parse(localStorage.getItem('user'));
    console.log("token ->  " + token.Token);

    //header Interceptor
    request = request.clone({ headers: request.headers.set('X-ACCESS-TOKEN', token.Token) });
    return next.handle(request).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          console.log('event--->>>', event);
        }
        return event;
      }));
  }
}
   

그리고 이와 같이 작성합니다.

 

저희는 local에 발급되어진 토큰을 가져다가 사용할 것입니다.

 

 

 

consol.log를 확인해보시면 잘 가져와지는 것을 볼 수 있습니다.

 

 

 

2. 모듈 등록

 

app.module.ts로 이동합니다.

 

이와같이 모듈에 등록하여 모듈에게 이러한 서비스가 있다는 것을 알려줍니다.

 

 

그 다음 providers에 등록합니다. 

그럼 설정 끝!

 

 

 

 

3. 결과 확인

토근 값이 header에 추가되어 요청이 됬습니다.