Open rkdcodus opened 1 day ago
๊ธฐ์กด ์ฝ๋๋ memberId๋ฅผ ๊ฐ์ ธ์ค๋ useQuery๋ฅผ 5์ด๋ง๋ค ํธ์ถํด์ ๋ก๊ทธ์ธ์ด ๋ง๋ฃ๋์๋์ง ํ์ธํ์์ต๋๋ค. setInterval ํจ์๋ก ๋ก๊ทธ์ธ ๋ง๋ฃ ํ์ด๋จธ๋ฅผ ๊ตฌํํด ๋ถํ์ํ api ์์ฒญ์ ์ค์ด๋ฉด์ ๋ก๊ทธ์ธ์ด ๋ง๋ฃ๋์๋์ง ํ์ธํ๋๋ก ๋ณ๊ฒฝํ์ต๋๋ค.
expDate
setExpDate
const useExpDate = () => { const accessToken = localStorage.getItem('accessToken'); const { setExpDate } = useAuthActions(); const handleExpDate = () => { if (accessToken) { try { const decode = jwtDecode(accessToken); if (!decode.exp) return; const date = new Date(0); date.setUTCSeconds(decode.exp); setExpDate(date); } catch (error) { console.error('Failed to decode token:', error); } } }; return { handleExpDate }; };
handleExpDate
jwt-decode
const hasExpired = (expirationDate: Date) => { if (!expirationDate) return false; const currentDate = new Date(); const timeDiff = expirationDate.getTime() - currentDate.getTime(); return timeDiff <= 0 ? true : false; };
useEffect(() => { let expireInterval: NodeJS.Timeout; if (!expDate) handleExpDate(); // ๋ง๋ฃ ์๊ฐ์ด null์ด๋ผ๋ฉด ๊ตฌํฉ๋๋ค. if (expDate) { expireInterval = setInterval(() => { if (hasExpired(expDate)) { // ์์ธ์ค ํ ํฐ์ด ๋ง๋ฃ๋์๋ค๋ฉด const setting = { title: MODAL.authentication_error.title, content: MODAL.authentication_error.content, }; const button1 = { active: true, text: MODAL.confirm, color: semantic.light.accent.solid.hero, interaction: INTERACTION.accent.subtle(), clickHandler: () => (window.location.href = '/'), }; clearAuth(true); // ๋ก๊ทธ์์์ํค๊ธฐ clearInterval(expireInterval); // setInterval ์คํ ์ ์ง modal(setting, button1); // ๋ชจ๋ฌ ๋์ฐ๊ธฐ } }, 60000); } return () => { if (expireInterval) clearInterval(expireInterval); }; }, [memberId, expDate]);
1๋ถ(60000ms)
ํ์ธ
useLogout
clearAuth()
isExp
setInterval์ 1๋ถ๋ง๋ค ๋ก๊ทธ์ธ ๋ง๋ฃ๋ฅผ ํ์ธํ๋๋ฐ ์ด๋ ํ์ธ๋๋ ๋ง๋ฃ์ ์ํด ๋ชจ๋ฌ์ด ๋ฐ ๊ฒฝ์ฐ, ๋ก๊ทธ์ธ ๋ง๋ฃ ์๊ฐ 30๋ถ์ด ์ง๋\n์๋์ผ๋ก ๋ก๊ทธ์์ ๋์์ด์ ๋ฉ์์ง๊ฐ ๋ํ๋ฉ๋๋ค. ํ์ง๋ง setInterval ํจ์๊ฐ ๋จผ์ ๋ง๋ฃ๋ฅผ ํ์ธํ์ง ๋ชปํ ์ํ์์ ์ฌ์ฉ์๊ฐ ํ์ด์ง ์ด๋/์๋ก๊ณ ์นจ์ผ๋ก ์์ธ์ค ํ ํฐ์ด ๋ง๋ฃ๋ ๊ฒ์ ์๊ฒ ๋์์ ๊ฒฝ์ฐ์๋ useUser ๋ด๋ถ์ 401์๋ฌ ๋ชจ๋ฌ์ด ๋ํ๋ฉ๋๋ค. ์ด ๊ฒฝ์ฐ ์ก์ธ์ค ํ ํฐ ์ถ์ถ์ ์คํจํ์ต๋๋ค. ๋ค์ ๋ก๊ทธ์ธ ํด์ฃผ์ธ์ ๋ฉ์์ง๊ฐ ๋ํ๋ฉ๋๋ค.
๋ก๊ทธ์ธ ๋ง๋ฃ ์๊ฐ 30๋ถ์ด ์ง๋\n์๋์ผ๋ก ๋ก๊ทธ์์ ๋์์ด์
์ก์ธ์ค ํ ํฐ ์ถ์ถ์ ์คํจํ์ต๋๋ค. ๋ค์ ๋ก๊ทธ์ธ ํด์ฃผ์ธ์
์ถ๊ฐ์ ์ธ ์ฐธ๊ณ ์ฌํญ์ด๋ ๊ด๋ จ๋ ๋ฌธ์, ๋งํฌ ๋ฑ์ ์ ๊ณตํด์ฃผ์ธ์.
๋ณ๊ฒฝ ์ฌํญ์ ๋ํ ์คํฌ๋ฆฐ์ท์ด ์๋ค๋ฉด ์ฒจ๋ถํด์ฃผ์ธ์.
์ด์ ๋ฒํธ: Close #227
โ ์ฒดํฌ๋ฆฌ์คํธ
๐ ์์ ์์ธ ๋ด์ฉ
๊ธฐ์กด ์ฝ๋๋ memberId๋ฅผ ๊ฐ์ ธ์ค๋ useQuery๋ฅผ 5์ด๋ง๋ค ํธ์ถํด์ ๋ก๊ทธ์ธ์ด ๋ง๋ฃ๋์๋์ง ํ์ธํ์์ต๋๋ค. setInterval ํจ์๋ก ๋ก๊ทธ์ธ ๋ง๋ฃ ํ์ด๋จธ๋ฅผ ๊ตฌํํด ๋ถํ์ํ api ์์ฒญ์ ์ค์ด๋ฉด์ ๋ก๊ทธ์ธ์ด ๋ง๋ฃ๋์๋์ง ํ์ธํ๋๋ก ๋ณ๊ฒฝํ์ต๋๋ค.
authStore์ ์๋ก์ด state ์ถ๊ฐ
expDate
: ๋ก๊ทธ์ธ ๋ง๋ฃ ์๊ฐ ์ ์ฅsetExpDate
: expDate ์ ๋ฐ์ดํธ ํจ์useExpDate ํ ์์ฑ
handleExpDate
ํจ์๋ ๋ก๊ทธ์ธ์ด ๋ง๋ฃ๋๋ ์๊ฐ์ ๊ตฌํด expDate ์ํ๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค.jwt-decode
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ฐธ๊ณ : ์ฝ๊ฒ ์ดํดํ๋ jwt-decode ๋ผ์ด๋ธ๋ฌ๋ฆฌHeader ์ปดํฌ๋ํธ์ ๋ก๊ทธ์ธ ๋ง๋ฃ ํ์ด๋จธ ๊ตฌํ
1๋ถ(60000ms)
๋ง๋ค ๋ง๋ฃ ์๊ฐ๊ณผ ํ์ฌ ์๊ฐ์ ๋น๊ตํ์ฌ ๋ง๋ฃ๋์๋์ง ํ์ธํฉ๋๋ค.ํ์ธ
๋ฒํผ ํด๋ฆญ ์ ์๊ฐํ์ด์ง๋ก ์ด๋ํฉ๋๋ค.useLogout
์ ์กฐ๊ธ ์์ ํ์ต๋๋ค.clearAuth()
์isExp
์ธ์๊ฐ ์์ ๊ฒฝ์ฐ์๋ ์๊ฐํ์ด์ง ์ด๋ ์ฝ๋๊ฐ ์คํ๋์ง ์๋๋ก ํ์ต๋๋ค.setInterval์ 1๋ถ๋ง๋ค ๋ก๊ทธ์ธ ๋ง๋ฃ๋ฅผ ํ์ธํ๋๋ฐ ์ด๋ ํ์ธ๋๋ ๋ง๋ฃ์ ์ํด ๋ชจ๋ฌ์ด ๋ฐ ๊ฒฝ์ฐ,
๋ก๊ทธ์ธ ๋ง๋ฃ ์๊ฐ 30๋ถ์ด ์ง๋\n์๋์ผ๋ก ๋ก๊ทธ์์ ๋์์ด์
๋ฉ์์ง๊ฐ ๋ํ๋ฉ๋๋ค. ํ์ง๋ง setInterval ํจ์๊ฐ ๋จผ์ ๋ง๋ฃ๋ฅผ ํ์ธํ์ง ๋ชปํ ์ํ์์ ์ฌ์ฉ์๊ฐ ํ์ด์ง ์ด๋/์๋ก๊ณ ์นจ์ผ๋ก ์์ธ์ค ํ ํฐ์ด ๋ง๋ฃ๋ ๊ฒ์ ์๊ฒ ๋์์ ๊ฒฝ์ฐ์๋ useUser ๋ด๋ถ์ 401์๋ฌ ๋ชจ๋ฌ์ด ๋ํ๋ฉ๋๋ค. ์ด ๊ฒฝ์ฐ์ก์ธ์ค ํ ํฐ ์ถ์ถ์ ์คํจํ์ต๋๋ค. ๋ค์ ๋ก๊ทธ์ธ ํด์ฃผ์ธ์
๋ฉ์์ง๊ฐ ๋ํ๋ฉ๋๋ค.๐จ ๋ฒ๊ทธ ๋ฐ์ ์ด์ (์ ํ ์ฌํญ)
๐ ํ์ ์์ (์ ํ ์ฌํญ)
๐ค ์ง๋ฌธ ์ฌํญ (์ ํ ์ฌํญ)
๐ ์ฐธ๊ณ ์๋ฃ (์ ํ ์ฌํญ)
์ถ๊ฐ์ ์ธ ์ฐธ๊ณ ์ฌํญ์ด๋ ๊ด๋ จ๋ ๋ฌธ์, ๋งํฌ ๋ฑ์ ์ ๊ณตํด์ฃผ์ธ์.
๐ธ ์คํฌ๋ฆฐ์ท (์ ํ ์ฌํญ)
๋ณ๊ฒฝ ์ฌํญ์ ๋ํ ์คํฌ๋ฆฐ์ท์ด ์๋ค๋ฉด ์ฒจ๋ถํด์ฃผ์ธ์.
โ ์ ํ ์ฒดํฌ๋ฆฌ์คํธ
์ด์ ๋ฒํธ: Close #227