리액트에서 회원가입,로그인 쿠키 질문있습니다

Question

서버쪽에서 회원가입과 로그인할때 쿠키에 토큰을 담아서 전송해주고있습니다. res.cookie('access_token', token, { httpOnly: true, secure: false, maxAge: 3600000, }); 그럼 이경우 리액트에서 사용자인증처리를할때 (로그인 기타등등) 쿠키값을 어떻게 가져와서 통신처리해줘야하나요?먼저 f12누르고 쿠키탭에 'access_token'이름으로 토큰값은 잘 들어가있습니다.지금 시도해본것은react-cookie사용. 회원가입,로그인 페이지에서 요청성공시 쿠키 새로생성import { useCookies } from 'react-cookie'; const [cookies, setCookie] &#61; useCookies(); ... if (data.success &#61;&#61;&#61; true) { // 회원가입 성공 시 쿠키에 사용자 정보 저장 setCookie('access_token1', data.token, { path: '/', expires: new Date(Date.now() &#43; 3600000), }); } document.cookie 사용 if (data.success &#61;&#61;&#61; true) { document.cookie &#61; &#96;access_token&#61;${data.token}&#96;; }혹은 document.cookie 조회 (근데 이경우 httpOnly 설정때문에 서버쪽에서 보낸 쿠키값 조회가안됨) 등입니다. 근데 1번과 2번 모두 다 비효율적이라고 생각하는게..f12누르면 토큰값은 똑같지만 쿠키가 두개가되어버립니다. 서버쪽에서 전송한 쿠키와 클라이언트에서 설정한 쿠키 총 두개.. 그리고 쿠키는 서버쪽에서 만지는거라는걸로 인식하고있는데 클라이언트쪽에서 만져도 되는걸까요? 근데 쿠키는 서버쪽에서 만지는거다 라고 인식을하고있는데 의문인게 그럼 react-cookie를 사용을 왜하는거지 라는 의문이듭니다.좀 멍청한 생각을하고있는거같은데 바로잡아주시면 정말 감사하겠습니다.어떤식으로 사용자인증처리를해줘야하나요?

프2년차 · Answer

서버에서 보내준 쿠키가 브라우저 헤더와 쿠키에 정상 저장 되었다면 클라이언트에서 해야할 건 withCredentials 속성 값을 true로 설정해줘야하는것 말고는 없습니다. 리액트 쿠키를 쓸 필요가 없는 것이죠...!일단 서버에서 쿠키를 세팅해주면 ajax 통신마다 자동으로 헤더에 쿠키가 담겨 데이터와 함께 전송됩니다.

리액트에서 회원가입,로그인 쿠키 질문있습니다

1개의 답변

Q&A 목록