next.js 에서 ssr의 경우 쿠키 접근은 어떻게 하나요?

조회 590

profile picture

익명

1월 26일

1. next.js 에서 ssr의 경우 로컬스토리지는 접근이 불가능한데 쿠키도 접근이 불가능한가요? 2. 그리고 추가로 궁금한 부분은 accessToken을 로컬 스토리지로 저장하시는 분들은 ssr시에 인증을 어떻게 하시나요??

구체적이고 정성스러운 질문에 Up 투표를 눌러주세요.

설명이 부족한 질문에 Down 투표를 눌러주세요. 커리어리가 질문자에게 수정을 요청할게요.

답변 2

BEST 답변

손정현님의 프로필 사진

안녕하세요. 1. next.js 서버 사이드에서는 들어오는 리퀘스트 객체에 접근이 가능합니다. 해당 객체로 쿠키 접근이 가능해요. - https://nextjs.org/docs/advanced-features/middleware#using-cookies - https://nextjs.org/docs/api-reference/next/server#nextrequest 2. accessToken이라고 말씀하시는 것으로 보아 OAuth token 이라고 예상하고 답변을 드리자면, accessToken을 주로 요청 헤더에 Authorization: Bearer {accessToken}으로 추가해서 서버로 보내줍니다. 클라이언트 (브라우저)에서 accessToken을 어디에 저장할지와 서버에서 어떻게 처리할지는 구현 방법에 따라 다를 것 같습니다. 좀 더 부연 설명을 하자면, 주로 클라이언트 쪽에서 서버로 요청을 보낼 때 헤더에 accessToken을 넣어주고 서버에서는 들어오는 요청의 헤더를 확인해서 인증/인가 하는 형태입니다. 모든 endpoint 마다 코드 복붙을 하면 안되니까 중간에 middleware 또는 interceptor 등을 사용해서 인증/인가 관련 로직을 처리합니다. 관련해서 커리어리 내에도 질문들이 많아서 한번 훑어보시면 도움이 되실 것 같습니다 :) - https://careerly.co.kr/qnas/1707 - https://careerly.co.kr/qnas/1539 - https://careerly.co.kr/qnas/1051 - https://careerly.co.kr/qnas/1533

커리어리 AI 봇님의 프로필 사진

1. SSR에서도 쿠키에 접근이 가능합니다. Next.js에서 제공하는 ' getServerSideProps '나 ' getInitialProps '를 사용하여 서버 측에서 쿠키에 접근할 수 있습니다. 예를 들어, ' req.cookies '를 통해 쿠키에 접근할 수 있습니다. 2. ' accessToken '을 로컬 스토리지에 저장하는 것은 보안상의 문제가 있습니다. 대신 쿠키나 서버 측 상태 관리 라이브러리 (예: Redux)를 사용하여 인증을 처리하는 것이 좋습니다. 쿠키를 사용하려면 ' getServerSideProps '나 ' getInitialProps '에서 쿠키를 읽고, 클라이언트 측에서는 서버에서 전달된 쿠키를 사용하여 요청을 보내면 됩니다. 예를 들어, Axios에서는 ' withCredentials ' 옵션을 true로 설정하여 쿠키를 전송할 수 있습니다.

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직 개발자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직 개발자들의 명쾌한 답변을 얻을 수 있어요.