์์์ ๋งํ๋๋ก Next.js์๋ SSR์ด ์๊ธฐ ๋๋ฌธ์ ๊ทธ๊ฑธ ํตํด์ Nest.js์ ํต์ ์ ํ๋ ค๊ณ ์์ ์ค์ด๋ค.
- ๋ก๊ทธ์ธ ์ ์์๋
- Next.js Front โ Next.js Back โ Nest.js โ Next.js Back โ Next.js Front์ ์์๋ก ๊ฐ๊ณ ์๋ค.
- Token๋ ์ด์ ๋์ผํ ์์๋ก ๊ฐ์ Nest.js์์ ๋ง๋ค์ด์ง๋ค.
๊ทธ๋์!
Nest.js์์ Access Token๊ณผ Refresh Token์ ๋ชจ๋ ๋ง๋ค๊ณ , ๋ณด์์ด ์ค์ํ Refresh Token์ Next.js Back์์ ์ฟ ํค๋ก ๋ง๋ค์ด์ฃผ๊ณ , Access Token์ Local Storage์ ์ ์ฅํ๊ธฐ๋ก ํ๋ค.
Next.js Front์์ ์์ ๋ก๊ทธ์ธ ์์ฒญ
page.ts
Next.js Back์์ Nest.js๋ก ์์ฒญ
route.ts
Nest.js์์ ์์ ๋ก๊ทธ์ธ
ํ ํฐ ์์ฑ
this.jwtService.sign({ id }, { secret });
Access Token๊ณผ Refresh Token ๋ชจ๋ ์์ฑํด์ค๋ค.
- ์์ง Refresh Token์ ์ ์ฅํ DB๋ ๋ง๋ค์ด์ฃผ์ง ์์๋ค. (์ถํ ๊ตฌํ ์์ )
Next.js์์ Token ๋ฐ์์ค๊ธฐ
const response = NextResponse.json({ token }); response.cookies.set('refreshToken', refreshToken, { httpOnly: true, path: '/', sameSite: 'strict', secure: true, }); return response
์ฌ๊ธฐ์ ์ฐธ ๋ง์ด ํค๋งธ๋ค..
NextResponse.json({ token });
์ Front๊น์ง ๊ฐ ๋ ์์ด๊ณ ,์๋๋ ์ฟ ํค๋ฅผ ๊ตฝ๋ ๋ฐฉ๋ฒ์ด๋ค.
๋ฐ์์จ Access Token์ Local Storage์ ์ ์ฅ
const { token } = data; LocalStorage.setItem('AccessToken', token);
LocalStorage์ ์ ์ฅํ๋ ค๋ฉด useEffect๋ฅผ ์ฐ๋ ๋ฐฉ๋ฒ๊ณผ, Class๋ฅผ ๋ง๋ค์ด์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด ์๋๋ฐ ๋๋ Class๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํ์๋ค.
class LocalStorage { static setItem(key: string, value: string) { if (typeof window === 'undefined') return; localStorage.setItem(key, value); } static getItem(key: string) { if (typeof window === 'undefined') return null; return localStorage.getItem(key); } static removeItem(key: string) { if (typeof window === 'undefined') return; localStorage.removeItem(key); } } export default LocalStorage;
์ด๋ ๊ฒ ํ์ง ์์ผ๋ฉด rendering๋๊ธฐ ์ ์ Local Storage์ ์ ์ฅํ๋ ค๊ณ ํ๊ธฐ ๋๋ฌธ์ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค!
๋์ค์ ๊บผ๋ด์ ์ธ ๋๋
const accessToken = LocalStorage.getItem('AccessToken');
์ด๋ ๊ฒ ์ธ ์ ์๋ค.
'TIL' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
too many clients์์ ๋ฒ์ด๋๋ณด์ (0) | 2024.08.19 |
---|---|
๋ ธ์ API๋ฅผ ๊ณต์ง์ฌํญ์ ์ ์ฉํด๋ณด๋ฉด ์ด๋จ๊น? (0) | 2024.08.19 |
x-api-key authorization (0) | 2024.08.19 |
supertest์ :id๊ฐ 500์ผ๋ก ๋จ์ด์ง๋ค๋ฉด? (0) | 2024.08.19 |
mysql typeorm์ผ๋ก ํ๋ฐฉ์ generateํ๊ธฐ (0) | 2024.08.19 |