문제 상황
로그인 후, 일부 api 요청에는 Authorization: Bearer <Access Token>을 헤더에 포함해야 하는 경우가 있음
하지만, Next.js 클라이언트 컴포넌트에서 쿠키에 저장된 토큰에 직접 접근할 경우, 안전하게 관리되어야 할 토큰이 노출됨
시도한 방법과 한계
시도한 방법 | 한계 |
Next.js API route를 만들어, 클라이언트가 Next.js API route로 요청을 보내면, Next.js api route에서 토큰 값을 인증 헤더에 담아 백엔드 api로 요청 | 인증 헤더에 토큰이 필요한 요청마다 이렇게 구현하는 것은 비효율적 |
서버컴포넌트에서 cookies()를 이용해 액세스 토큰값을 가져옴 | 클라이언트 컴포넌트에서 axios 요청을 해야하는 경우, 클라이언트에게 토큰값이 노출되어버림 |
axios 인터셉터를 통해 토큰이 필요한 요청일 때 인증헤더에 토큰값을 담아줌 | axios 인터셉터 함수는 클라이언트 실행 컨텍스트에서 동작하므로, axios 인터셉터 함수 안에서 액세스 토큰을 직접 가져올 수 없음 |
해결
클라이언트에서는 모든 api 요청을 Next.js 서버로 보내고, 인증 헤더에 토큰을 담는 역할은 미들웨어가 수행하도록 구현
•
클라이언트
◦
Next.js API Route로 요청을 보냄
•
미들웨어
◦
인증 헤더에 토큰을 담아, 요청을 Next.js API Route로 전달
•
Next.js API Route
◦
인증을 거친 후, 클라이언트의 요청을 받아 백엔드 API로 다시 요청을 보냄
◦
백엔드 API의 응답을 받아 클라이언트로 반환