안녕하세요. 개발자 왕란입니다!!
오늘은 프로젝트 작성 중 발생한 자잘한 이슈와 그 해결방법에 대해 포스팅하려고 합니다.
주제는 Postman 툴에서 API 요청을 보낼 때, Request Header의 Authorization 부분에서 토큰을 설정하고 가져오는 것입니다.
1. 현재 요구사항
현재 개발 중인 프로젝트의 요구사항에서, 로그인 시 Response Header의 `Authorization` key에 Bearer 토큰 Value를 넣도록 설정했습니다. 이 토큰을 활용하여 로그인 후 사용하는 회원정보 조회, 회원정보 수정, 회원 탈퇴 등의 API의 동작전 필터에서
"유효한 JWT 토큰을 가지고 있는가? "
를 검증하고 있습니다. 현재 상태를 보겠습니다!
로그인 요청을 보내면 Headers 탭에 Authorization에 "Bearer ey~" 형태의 토큰을 입력하고 있습니다.
추후 로그인 한 후, 요청을 보내려면 이 Authorization Key에 있는 Value 인 토큰이 Request Header의 Authorization에 들어가야 합니다. 하지만 다음 API 인 `현재 로그인 중인 유저 확인` 기능은 Request Headers 부분에 Authorization 키가 존재하지 않아서 아래와 같이 403 에러가 발생하게 됩니다.
Request Headers에 직접 Key와 Value를 입력하여 통과할 수 있겠지만, 이렇게 하면 추후 테스트할 때 로그인 후 다시 초기화해 주는 번거로운 과정이 필요합니다. (쿠키에 Authorization 이름으로 넣어 싱크를 자동으로 맞춰줄 수 있지만 지금 프로젝트 요구사항과 다릅니다)
이것을 해결하기 위해 엔드포인트 입력란 아래의 Scripts 부분의 pre-request와 post-response를 설정하여 환경변수로 해결해 보도록 하겠습니다.
2. 환경변수 설정
포스트맨 화면의 Environments 탭에서 좌상단의 + 버튼을 누릅니다. 그러면 새로운 환경변수를 설정할 수 있습니다. 저는 이 환경변수 이름을 env1로 만들었고, 내부에 내용을 accessToken으로 설정합니다.
(아래에 작성된 코드를 복사하여 쓰실 경우 반드시 accessToken 으로 설정해 주세요!)
설정 후에는 우 상단의 myenv 부분에서 프로젝트에 사용할 env 파일을 불러오면 됩니다. 저는 이전에 쓰던 환경변수인 myenv를 그대로 쓰도록 하겠습니다.
이 부분에서 Globals에 환경변수를 설정할 수 있지만, Postman으로 테스트하는 하는 프로젝트가 여러 개일 경우 환경변수파일은 개별적으로 관리하는 것을 추천드립니다!
3. Scripts 세팅
제가 이 포스팅을 작성하는 이유입니다. 다른 분들의 블로그 포스팅을 많이 찾아보았지만, 지금 제가 사용하는 UI의 포스트맨을 사용하는 분들이 많이 없었습니다. (최근에 업데이트된 듯합니다)
위 사진과 같이 로그인 API에 돌아와서 중간의 Scripts 부분을 클릭하면 좌측에 Pre-request와 Post-response를 확인할 수 있습니다.
Pre-request : 요청을 보내기 전 수행할 JavaScript 부분
Post-response : 요청을 보내고 나서 수행할 JavaScript 부분
이라고 생각하시면 됩니다.
지금은 로그인 요청 이후, 200 OK로 요청이 성공적으로 수행되고 나서 아까 설정한 환경변수인 myenv 내부의 accessToken이라는 Key에 Authorization 토큰을 넣어줄 계획입니다. 따라서 Post-response 부분에 다음과 같이 코드를 작성해 줍니다.
// 응답 헤더에서 "Authorization" 토큰 키를 get
const accessToken = pm.response.headers.get("Authorization");
if (accessToken) {
// Bearer 토큰 형식이 포함되어 있다면 분리
const token = accessToken.replace("Bearer ", "").trim();
pm.environment.set("accessToken", token); // 환경 변수에 저장 ! 중요
console.log("Access Token:", token); // 디버깅용 로그
} else {
console.warn("Authorization header not found");
}
이렇게 되면 로그인을 성공했을 시 아래 Response Headers의 Authorization에서 토큰을 가져와 아까 설정한 env1(저는 myenv였습니다)의 accessToken 자리에 "Bearer 토큰"을 trim 하여 넣어주게 됩니다.
잘 들어가 있는 것을 확인할 수 있습니다. 이어서 이 토큰을 활용하여
"로그인된 유저가 보내는 요청"
을 수행해 보도록 하겠습니다. 저의 경우 현재 로그인된 유저의 정보를 가져오는 것입니다.
// 환경 변수에서 액세스 토큰 가져오기
const accessToken = pm.environment.get("accessToken");
if (accessToken) {
pm.request.headers.upsert({
key: "Authorization",
value: `Bearer ${accessToken}`
});
console.log("Authorization header added:", `Bearer ${accessToken}`);
} else {
console.warn("Not found accessToken in the environment.");
}
API로 돌아와서 아까와 마찬가지로 Scripts 탭을 클릭합니다. 하지만 이번에는 Post-response 가 아닌 Pre-request 탭을 클릭하여 위와 같은 코드를 작성해 줍니다.
현재 상황을 정리해 보겠습니다.
* 프로젝트에 사용할 환경변수 : myenv
1. 로그인 요청:
👉 성공 시 Post-response의 스크립트가 동작하며, myenv의 accessToken 키에 응답 헤더로 받은 Authorization 키의 토큰을 저장한다.
2. 현재 로그인된 유저 확인:
👉 pre-request의 스크립트가 동작하며, API 수행 전 request 헤더에 Authorization이라는 이름의 key로 환경 변수에 입력되어 있는 토큰값을 가져와서 Bearer 형식으로 작성한다.
의 내용이 아래 코드에서 수행됩니다. 이때 upsert() 메서드 대신 set()을 사용해도 되지만, upsert는 Authorization 이 이미 있으면 새로운 내용으로 덮어쓰는 행위를 하고, set() 은 없을 때 설정하는 행위만 합니다. (둘의 큰 차이는 없어서 API 비즈니스 로직에 따라 문제없이 동작할 수 있습니다.)
pm.request.headers.upsert({
key: "Authorization",
value: `Bearer ${accessToken}`
});
*참고*
로그인 시 Bearer 부분을 trim 하지 않고, Pre-request에 위와 같은 형태가 아닌 accessToken 만 불러와서 하는 것도 상관없습니다!
4. 결과 확인
정상적으로 요청을 보내고 응답도 받는 것을 확인할 수 있습니다.
이 방식의 단점은, Request Headers에 환경변수에서 토큰을 가져와 세팅한 Authorization 부분은 보이지 않는다는 것입니다.
요약하면,
0. 환경변수 파일 만들기
1. 로그인 성공 시 Post-response 설정하기
2. 이후 로그인 된 상태에서 보내는 모든 요청의 pre-request를 설정하기
총 3단계를 통해 헤더의 Authorization 값을 설정할 수 있습니다.
읽어주셔서 감사합니다!!