jmch09220140

<p><img src="https://cdn.inflearn.com/public/files/posts/acf58dc0-59ad-4f46-8872-6f49874e3de8/f634bd37-a4e9-4563-8fe2-1aa5a8afe22a.png" alt="" /></p>
<p></p>
<p>크롬에서는 이게 문제인가보네요...결국 https프로토콜을 이용해야만..크롬에서는 samsite 옵션을 줄수있나봐요..</p>

안녕하세요 로그인 관련해서 서버간 쿠키교환..

<p>어...이런경우는 처음인데... 크롬..만안되네요?;;; 구글링 계속하면서도 크롬이슈가 있길래 설마했는데.. 다른 브라우저들은 되네요;;</p>

<p>허...주고 서버 재시작해도 왜안되는지 이유를 모르겟네요...</p>

<p>아?혹시 res.cookie에서도 옵션을 같이 줘야하는걸까요?</p>

<p>token이라는 쿠키는 미들웨어를 통해서 만드는 토큰입니다.</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #569cd6;">const</span>&nbsp;<span style="color: #dcdcaa;">verifyToken</span>&nbsp;=&nbsp;<span style="color: #569cd6;">async</span>&nbsp;(<span style="color: #9cdcfe;">req</span>,&nbsp;<span style="color: #9cdcfe;">res</span>,&nbsp;<span style="color: #9cdcfe;">next</span>)&nbsp;<span style="color: #569cd6;">=></span>&nbsp;{</div>
<div>&nbsp;&nbsp;<span style="color: #569cd6;">let</span>&nbsp;<span style="color: #9cdcfe;">connect</span>,&nbsp;<span style="color: #9cdcfe;">result</span>,&nbsp;<span style="color: #9cdcfe;">sql</span>,&nbsp;<span style="color: #9cdcfe;">sqlValues</span>;</div>
<div>&nbsp;&nbsp;<span style="color: #569cd6;">let</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">usertoken</span>,&nbsp;<span style="color: #9cdcfe;">userhost</span>,&nbsp;<span style="color: #9cdcfe;">userid</span>&nbsp;}&nbsp;=&nbsp;<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">body</span>.<span style="color: #9cdcfe;">tokenAuth</span>;</div>
<div>&nbsp;&nbsp;<span style="color: #569cd6;">let</span>&nbsp;{&nbsp;<span style="color: #9cdcfe;">token</span>&nbsp;}&nbsp;=&nbsp;<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">cookies</span>;</div>
<div>&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #9cdcfe;">token</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">try</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">decoded</span>&nbsp;=&nbsp;<span style="color: #4fc1ff;">jwt</span>.<span style="color: #dcdcaa;">verify</span>(<span style="color: #9cdcfe;">req</span>.<span style="color: #9cdcfe;">cookies</span>.<span style="color: #9cdcfe;">token</span>,&nbsp;<span style="color: #9cdcfe;">process</span>.<span style="color: #9cdcfe;">env</span>.<span style="color: #4fc1ff;">JWT_SALT</span>)</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;req.decoded&nbsp;=&nbsp;jwt.verify(req.headers.authorization,&nbsp;process.env.JWT_SALT)</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;<span style="color: #dcdcaa;">next</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">catch</span>&nbsp;(<span style="color: #9cdcfe;">err</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #9cdcfe;">err</span>.<span style="color: #9cdcfe;">name</span>&nbsp;===&nbsp;<span style="color: #ce9178;">'TokenExpiredError'</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">connect</span>&nbsp;=&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #4fc1ff;">pool</span>.<span style="color: #dcdcaa;">getConnection</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">sql</span>&nbsp;=&nbsp;<span style="color: #ce9178;">"SELECT&nbsp;*&nbsp;FROM&nbsp;user_token&nbsp;WHERE&nbsp;userid=?&nbsp;AND&nbsp;userhost=?&nbsp;AND&nbsp;usertoken=?"</span>;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">sqlValues</span>&nbsp;=&nbsp;[<span style="color: #9cdcfe;">userid</span>,&nbsp;<span style="color: #9cdcfe;">userhost</span>,&nbsp;<span style="color: #9cdcfe;">usertoken</span>];</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">result</span>&nbsp;=&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #9cdcfe;">connect</span>.<span style="color: #dcdcaa;">execute</span>(<span style="color: #9cdcfe;">sql</span>,&nbsp;<span style="color: #9cdcfe;">sqlValues</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #9cdcfe;">result</span>[<span style="color: #b5cea8;">0</span>][<span style="color: #b5cea8;">0</span>])&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">token</span>&nbsp;=&nbsp;<span style="color: #4fc1ff;">jwt</span>.<span style="color: #dcdcaa;">sign</span>({</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">id</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #9cdcfe;">userid</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;<span style="color: #9cdcfe;">process</span>.<span style="color: #9cdcfe;">env</span>.<span style="color: #4fc1ff;">JWT_SALT</span>&nbsp;,&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">expiresIn</span><span style="color: #9cdcfe;">&nbsp;:</span>&nbsp;<span style="color: #ce9178;">'1m'</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">res</span>.<span style="color: #dcdcaa;">cookie</span>(</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ce9178;">'token'</span>,&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #4fc1ff;">token</span>,&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">httpOnly</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #569cd6;">true</span>&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">connect</span>.<span style="color: #dcdcaa;">release</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">next</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">else</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">connect</span>.<span style="color: #dcdcaa;">release</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">res</span>.<span style="color: #dcdcaa;">status</span>(<span style="color: #b5cea8;">401</span>).<span style="color: #dcdcaa;">json</span>({</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">resultCode</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #b5cea8;">401</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">message</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #ce9178;">"토큰이&nbsp;유효하지&nbsp;않습니다."</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">next</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;</div>
<div>&nbsp;&nbsp;}&nbsp;<span style="color: #c586c0;">else</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">try</span>&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">connect</span>&nbsp;=&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #4fc1ff;">pool</span>.<span style="color: #dcdcaa;">getConnection</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">sql</span>&nbsp;=&nbsp;<span style="color: #ce9178;">"SELECT&nbsp;*&nbsp;FROM&nbsp;user_token&nbsp;WHERE&nbsp;userid=?&nbsp;AND&nbsp;userhost=?&nbsp;AND&nbsp;usertoken=?"</span>;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">sqlValues</span>&nbsp;=&nbsp;[<span style="color: #9cdcfe;">userid</span>,&nbsp;<span style="color: #9cdcfe;">userhost</span>,&nbsp;<span style="color: #9cdcfe;">usertoken</span>];</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">result</span>&nbsp;=&nbsp;<span style="color: #c586c0;">await</span>&nbsp;<span style="color: #9cdcfe;">connect</span>.<span style="color: #dcdcaa;">execute</span>(<span style="color: #9cdcfe;">sql</span>,&nbsp;<span style="color: #9cdcfe;">sqlValues</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #9cdcfe;">result</span>[<span style="color: #b5cea8;">0</span>][<span style="color: #b5cea8;">0</span>])&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">token</span>&nbsp;=&nbsp;<span style="color: #4fc1ff;">jwt</span>.<span style="color: #dcdcaa;">sign</span>({</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">id</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #9cdcfe;">userid</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;<span style="color: #9cdcfe;">process</span>.<span style="color: #9cdcfe;">env</span>.<span style="color: #4fc1ff;">JWT_SALT</span>&nbsp;,&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">expiresIn</span><span style="color: #9cdcfe;">&nbsp;:</span>&nbsp;<span style="color: #ce9178;">'1m'</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">res</span>.<span style="color: #dcdcaa;">cookie</span>(</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #ce9178;">'token'</span>,&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #4fc1ff;">token</span>,&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">httpOnly</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #569cd6;">true</span>&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">connect</span>.<span style="color: #dcdcaa;">release</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">next</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">catch</span>(<span style="color: #9cdcfe;">e</span>)&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">connect</span>.<span style="color: #dcdcaa;">release</span>();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">next</span>(<span style="color: #9cdcfe;">e</span>);</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
<div>&nbsp;&nbsp;}</div>
<div>}</div>
</div>

<p>네 서버도 재시작했습니다. 저 프론트 받는쪽에서 문제가아니라 백엔드 보내는쪽에서의 문제인가요?</p>

<p><img src="https://cdn.inflearn.com/public/files/posts/142ed575-f5b3-4b38-bd27-febc4f9dab64/eb5a119d-fba3-4d57-9d7a-396ec5bdee7a.png" alt="" /></p>
<p><img src="https://cdn.inflearn.com/public/files/posts/fe470e48-8a66-485e-8246-006021fc0556/4e1136f4-d0ea-4431-bfb5-618b5c0ccdb9.png" alt="" /></p>
<p>넣었는데 왜안될까요..</p>

<p>아아 네..알겠습니다 회사 끝나고 공부할때 다시 시도해보겠습니다 ㅠㅠ</p>

안녕하세요. useEffect 관련 질문 드립니다!

<p>아 그럼 들어온데이터가 리턴에서 어떻게 해줘야 스테이트업데이트가 안될까여?</p>

<p>스프레드 연산자를 이용하면 같은 스테이트들은 그냥 그대로 두는게 아니었나요..?</p>

jmch09220140

Bài viết