#5, #46 ๋ฐ ๋๋ถ๋ถ์ ์จ๋ผ์ธ ํ ๋ก ์์ ์ฌ๋๋ค์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฟ ํค๊ฐ ์๋ JWT์ ๋ํด ๋ก์ปฌ ์คํ ๋ฆฌ์ง/์ธ์ ์คํ ๋ฆฌ์ง๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ผ๋ก ๋ณด์ ๋๋ค. ์ด๋ฅผ ์ํด์๋ ์ฑ ์ ์ฒด์์ AJAX๋ฅผ ์ฌ์ฉํด์ผ ํ๋ฏ๋ก ๋งค๋ฒ ์น ์ ์ฅ์์์ ํค๋๋ฅผ ์ค์ ํ ์ ์์ต๋๋ค. ๋ด ์ดํด๋ ์ด๊ฒ์ด ์ฌ์ดํธ ๊ฐ ์์ฒญ ์์กฐ๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํ ๊ฒ์ด๋ฉฐ ๋ณธ์ง์ ์ผ๋ก ์ด๋ฅผ ์ํํ๊ธฐ ์ํด ๋์ผํ ์ถ์ฒ ์ ์ฑ ์ ํ์ฉํ๊ณ ์๋ค๋ ๊ฒ์ ๋๋ค.
์ด๊ฒ์ ์ผ๋ถ ์ฅ์น๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ ํ ์ง์ํ์ง ์๋ ์ ์ง์ ํฅ์๊ณผ ์ด๋ป๊ฒ ๋ง์ต๋๊น?
_Another_ _GREAT _ _
์ด ๋ง์ดํฌ๋ก ์์ ์ ๋ชฉ์ ์ ์ํด "_Ok_"๊ฐ localStorage
๋ฅผ ์ฌ์ฉํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
์์งํ ๋งํด์, _๋ชจ๋_๋ ์์ฆ ์ ๊ทผ์ฑ์ ๋ํด ์ ํ ๊ณ ๋ คํ์ง ์๊ณ React๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
๋ฉ์ง ์์ด๋ค์ ๋ชจ๋ _Progressive Enhancement_๋ณด๋ค _Shiny New Frameworks_์ _way_ ๋ ๊ด์ฌ์ด ์์ต๋๋ค...
ํ์ง๋ง...
_actual_ ์ฑ์์๋ ์ด์ ๋ฒ์ ๊ณผ์ ํธํ์ฑ๊ณผ ์ ์ง์ ์ธ ํฅ์์ ์ํด cookies
_precisely_ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
์ด๊ฒ์ด JWT2์ ์ต์
์ ์ถ๊ฐํ ์ด์ ์
๋๋ค... ์ฐธ์กฐ: https://github.com/dwyl/hapi-auth-jwt2#want -to-sendstore-your-jwt-in-a-cookie
๊ทธ๋์ ๊ฒฐ๋ก ์ ์ผ๋ก: ์ด ๋ฆฌํฌ์งํ ๋ฆฌ์ ์์ ์ localStorage
๋ฅผ ์ถ๊ฐํ๊ณ JWT๋ฅผ ์ ์ฅํ๊ธฐ ์ํด ์ฟ ํค๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด "_Ohkay_"์์ ์๋ฆฌ๋ comment
์ถ๊ฐํฉ๋๋ค. ์๋ํ๋ฉด ์ฌ์ ํ ๋ชจ๋ _์ํ ํ์ฅ์ฑ_๊ณผ ๋ณด์์ ์ป์ ์ ์๊ธฐ ๋๋ฌธ์
๋๋ค JWT๋ฅผ ์ค์ /๊ฐ์ ธ์ค๊ณ ๊ฐ ์์ฒญ์ ํค๋์ ์ถ๊ฐํด์ผ ํ๋ _๋
ธ๋ ฅ_์ ์ ์ฝํ๋ฉด์ JWT ์ฌ์ฉ์ ์ด์ ...
@rjmk & @nelsonic
๋ก์ปฌ ์ ์ฅ์์ ์ ์ฅ๋ JWTS๋ฅผ ํค๋๋ก ๋ณด๋ด์ผ ํ๋ ํน๋ณํ ์ด์ ๊ฐ ์์ต๋๊น? ์๋๋ฉด https://www.npmjs.com/package/node-localstorage ์ฌ์ฉ์ ๋ํด ์ทจ์ฝํ๊ฑฐ๋ "์๋ชป๋" ๊ฒ์ด
@Jbarget ์๋ฒ์์ localStorage
์ ์ก์ธ์คํด์ผ ํ๋ "_Universal_"์ ๊ตฌ์ถํ๊ณ ์์ต๋๊น? ๊ทธ๊ฒ์ด ๊ทํ์ ์ฌ์ฉ ์ฌ๋ก๋ผ๋ฉด node-localstorage
๋ชจ๋์ด ๊ทํ์ ๋ชฉ์ ์ ๋ฌ์ฑํ ๊ฒ์
๋๋ค.
_ํ์ง๋ง_ "AJAX" ์์ฒญ์์ ์๋ฒ๋ก ๋ค์ ๋ณด๋ด๋ ค๋ฉด header
์์ JWT๋ฅผ _์๋์ผ๋ก_ ๋ณด๋ด์ผ ํฉ๋๋ค... ๋ฐ๋ผ์ ์ํ๋ ๋ชจ๋ ๊ฒฝ์ฐ _module_์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ทธ๋ค์ง ์ด์ ์ด ์์ต๋๋ค. localStorage
์์ ํ ํฐ์ ๊ฐ์ ธ์ค๊ฑฐ๋ ์ค์ ํ๋ ๊ฒ์
๋๋ค ...
@nelsonic ์ฐ๋ฆฌ๋ ์๋ง๋ ๊ฐ ์์ฒญ์ ํค๋์ ์ค์ ํ๊ฒ ๋ ๊ฒ์ ๋๋ค. ๋ช ํ์ฑ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค!
@Jbarget JWT๋ฅผ ์ฟ ํค์ ์ ์ฅํ๋ ๋ฐ _์ด์๊ฐ ์์ต๋๊น? (_๊ทธ๊ฒ์ ๋น์ ์ ์ถ์ ๋จ์ํํฉ๋๋ค..._)
@nelsonic ์ด์๊ฐ ์์ต๋๋ค. ๋ก์ปฌ/์ธ์ ์ ์ฅ์๊ฐ ์๋ ์ฑ์ ์ด๋ ๊ณณ์์๋ ์ฟ ํค์ ์ก์ธ์คํ ์ ์์ด ๋ด ์ถ์ด ๋จ์ํ๋๋ค๊ณ ์๊ฐํ๋ ๊ฒ์ด ๋ง์ต๋๊น?
์๋ฒ์์ ์ฟ ํค๋ฅผ _์ค์ _ํ๋ฉด ์ ์ก/์์ ๋ _all_ ์์ฒญ์ ํญ์ ์ฟ ํค๊ฐ ํฌํจ๋๊ธฐ ๋๋ฌธ์ ์ฑ์ ๋จ์ํํฉ๋๋ค. ์ด๊ฒ์ ๋น์ ์ด ๊ทธ ์์ ์ดํ์ ๊ทธ๊ฒ์ ๋ํด _์ ๋_ ์๊ฐํ ํ์๊ฐ ์๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
๋์กฐ์ ์ผ๋ก JWT๋ฅผ localStorage
์ ์ ์ฅํ๋ฉด ๋น ajax ์ํธ ์์ฉ์ ๊ฐ์ง ์ ์์ผ๋ฉฐ ์๋ฒ์ ๋ํ ๊ฐ ์์ฒญ์ ๋ํด SET
auth
ํค๋๋ฅผ ๊ธฐ์ตํด์ผ ํฉ๋๋ค. .
์ด๊ฒ์ด ๋๊ตฌ ์ธํธ์ ๋ฐ๋ผ ๋ค๋ฅด์ง๋ง ๋ฐ๋์ ๊ทธ๋ฐ ๊ฒ์ ์๋๋๋ค. ์๋ฅผ ๋ค์ด Angular๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๊ฒ์ ํ ๋ฒ ์ค์ ํ ์ ์์ต๋๋ค. jquery๋ก๋ ์ฝ๊ฒ ํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
$.ajaxSetup({
headers: { 'x-my-custom-header': 'some value' }
});
ํ ํฐ์ ๋ํ ์ ์ก ๊ณ์ธต์ผ๋ก ์ฟ ํค์ ๋ ๋ค๋ฅธ ๋ฌธ์ ๋ 2๊ฐ์ ์๊ฐ ์ด๊ณผ๋ฅผ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ CORS ๋ฌธ์ ๋ฅผ ํผํ๋ ์ด์ ์ ์ป์ง ๋ชปํ๋ค๋ ๊ฒ์ ๋๋ค. ์ฟ ํค๋ RESTful ์น ์๋น์ค์ ๋ํ ์ก์ธ์ค๋ฅผ ๋ณต์กํ๊ฒ ๋ง๋ญ๋๋ค. ์ฟ ํค๋ฅผ ๋ฒ๋ค๋ก ๋ฌถ๋ ๊ฒ๋ณด๋ค ํ ํฐ์ผ๋ก ๋ฆฌ์์ค์ ์ก์ธ์คํ๊ธฐ ์ํด ํ๋์ ์ปฌ์ ๊ตฌ์ฑํ๋ ๊ฒ์ด ํจ์ฌ ์ฝ์ต๋๋ค.
1๋ ์ด ๋์์ผ๋ ์๋์ผ๋ก ์ข ๋ฃ๋๋ ๋ฌธ์ ์ ๋๋ค. ์ฌ์ ํ ๊ทํ์ ํ๋ก์ ํธ์ ๊ด๋ จ์ด ์๋ ๊ฒฝ์ฐ ์์ ๋กญ๊ฒ ๋ค์ ์ฌ์ญ์์ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด๊ฒ์ด ๋๊ตฌ ์ธํธ์ ๋ฐ๋ผ ๋ค๋ฅด์ง๋ง ๋ฐ๋์ ๊ทธ๋ฐ ๊ฒ์ ์๋๋๋ค. ์๋ฅผ ๋ค์ด Angular๋ฅผ ์ฌ์ฉํ๋ฉด ์ด๊ฒ์ ํ ๋ฒ ์ค์ ํ ์ ์์ต๋๋ค. jquery๋ก๋ ์ฝ๊ฒ ํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
ํ ํฐ์ ๋ํ ์ ์ก ๊ณ์ธต์ผ๋ก ์ฟ ํค์ ๋ ๋ค๋ฅธ ๋ฌธ์ ๋ 2๊ฐ์ ์๊ฐ ์ด๊ณผ๋ฅผ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ CORS ๋ฌธ์ ๋ฅผ ํผํ๋ ์ด์ ์ ์ป์ง ๋ชปํ๋ค๋ ๊ฒ์ ๋๋ค. ์ฟ ํค๋ RESTful ์น ์๋น์ค์ ๋ํ ์ก์ธ์ค๋ฅผ ๋ณต์กํ๊ฒ ๋ง๋ญ๋๋ค. ์ฟ ํค๋ฅผ ๋ฒ๋ค๋ก ๋ฌถ๋ ๊ฒ๋ณด๋ค ํ ํฐ์ผ๋ก ๋ฆฌ์์ค์ ์ก์ธ์คํ๊ธฐ ์ํด ํ๋์ ์ปฌ์ ๊ตฌ์ฑํ๋ ๊ฒ์ด ํจ์ฌ ์ฝ์ต๋๋ค.