[REFACTOR] cookies 활용 jwt 방식으로 마이그레이션 #176
Conversation
| ...options, | ||
| }; | ||
|
|
||
| const refreshAccessToken = async () => { |
There was a problem hiding this comment.
요 함수 로직 밖으로 빼도 괜찮을 것 같아요!
There was a problem hiding this comment.
요 부분을 저도 빼려고 했는데
const response = await createFetchApiClient<CustomResponse<PostLoginResponseData>>(
'/v2/auth/token-reissue',
{
method: 'POST',
body: JSON.stringify({ refresh_token: refreshToken }),
},
);createFetchApiClient요 부분에서 함수를 사용하고 있어서 애매하더라구요...
일단 동작하면 냅두고 다른 기능 해결하고 다시 봐도 괜찮을까요...
There was a problem hiding this comment.
넵넵 아님 lint-disabled 방식을 고려해도 좋을 것 같아요!
| const refreshToken = cookies().get('refreshToken')?.value; | ||
|
|
||
| if (!refreshToken) { | ||
| deleteTokenCookies(); |
There was a problem hiding this comment.
redirect로 메인이나 로그인페이로 이동하면 좋을 것 같아요
There was a problem hiding this comment.
현재 서버 컴포넌트로 되어있어서 router나 window를 쓰지 못해서 redirect()를 사용했습니다.
| const newRefreshToken = refreshAccessTokenResponse.result_data.refresh_token; | ||
| // 여기서 토큰을 새로 refreshAccessTokenResponse | ||
|
|
||
| if (newAccessToken && newRefreshToken) { |
There was a problem hiding this comment.
accessToken만 확인해도 괜찮지 않을까 싶어요.
There was a problem hiding this comment.
재발급 로직을 타면 access랑 refresh모두 새로 발급받게 되어서 둘다 값이 있는지 잘 저장되었는지 확인하기 위해서 두개 다 넣었습니다!
|
|
||
| return (await response.json()) as T; | ||
| } catch (error) { | ||
| console.error('Fetch error:', error); |
There was a problem hiding this comment.
로그인 페이지로 이동하게 하는 거 어떨까요?
| const defaultOptions: RequestInit = { | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| ...(accessToken && { Authorization: `${accessToken}` }), |
There was a problem hiding this comment.
newAccessToken으로 업데이트 필요합니다!
좋아요 쪽이 지금 이상한 것 같아요. newAccessToken으로 변경하면 다른 건 다 잘 요청되는데 '좋아요'만 에러로 넘어가네요. 저도 같이 확인해 볼게요~
There was a problem hiding this comment.
위쪽에서 새롭게 set을 해두어서 여기서는 accessToken을 가져와서 호출하면 되는 로직으로 생각했습니다..!
| router.refresh(); | ||
| router.push('/'); | ||
| setIsLoggedIn(false); | ||
| showToast('success', '로그아웃 되었습니다.'); |
There was a problem hiding this comment.
queryClient.clear();이 없어서 로그아웃 해도 사용자 정보가 보이고 있어요!
|
좋아요/삭제하기/등록하기에서 에러 발생하는데 merge 하기 전에 전체적으로 다시 한 번 잘 작동되는지 확인이 필요해 보여요! |
src/utils/handleLogout.ts
Outdated
| @@ -0,0 +1,6 @@ | |||
| import { deleteCookie } from 'cookies-next'; | |||
|
|
|||
| export function handleLogout() { | |||
There was a problem hiding this comment.
함수명 deleteCookie 이런걸로 바꾸면 어떨까요??
| deleteCookie('accessToken'); | ||
| deleteCookie('refreshToken'); |
There was a problem hiding this comment.
handleLogout으로 호출하는 거 어떨까요?
What is this PR? 🔍
Changes 📝
next-cookies를 활용하여 클라이언트와 서버에서 쿠키를 사용할 수 있게 구현하였습니다.createFetchApiClient를 생성하여 구현하였습니다.const tokens = getAuthTokens();을 사용하여 tokens을 fetch문으로 넘겨주어 인증합니다.ScreenShot 📷
Precaution
api call 부분에서는 아쉬움이 많이 남는데, 기능이 잘 돌아가는지 동작이 잘 되는지를 기준으로 봐주시면 감사하겠습니다.
✔️ Please check if the PR fulfills these requirements
developbranch unconditionally?main?npm run lint