Refactor/79/change login management

[ToKyun02]

❓이슈

• close Refactor: 로그인 로직 변경(cookie) #79

✍️ Description

로컬스토리지에서 쿠키로 토큰 관리 방식을 변경함에 따라 수정한 로직에 관한 PR입니다.

추가로 외부 백엔드 s3 이미지 도메인 config에서 설정했습니다.
♻️ refactor : api 요청 catch-all-segment 처리 -> 이 커밋 전에는 각 도메인별로 route handler를 설정했었는데, 그럴 필요가 없다고 생각하여 catch-all-segment의 route로 로직 수정했습니다.

외부 백엔드 API 호출 흐름은 다음과 같습니다.

• 우선, 기존 axios객체와 authStore는 남겨두고 구현했습니다.
• 기존 apis폴더에 작업한 파일은 /auth, /users만 수정했습니다.

1. 클라이언트에서 이벤트 발생 시 axiosClient호출 ('/users/me'처럼 엔드포인트 설정)
2. axiosClient request interceptor에서 '/api'를 baseUrl로 설정하여 ('https://origin/api/user/me')로 Next서버에 api 요청
3. Next서버에서 axiosServer객체로 각 HTTP 요청에 맞는 외부 백엔드 API 요청 처리(app/api/[...endpoint]/route.ts)
4. 외부 백엔드 요청 처리 후 클라이언트에게 응답

redirect 로직은 다음과 같습니다.

• cookie가 존재하지 않음
  • 로그인 이후 접속 가능한 페이지일 경우 /login으로 리다이렉트
• cookie가 존재
  • 로그인 이전 접속 가능한 페이지일 경우 /mydashboard로 리다이렉트

Link 컴포넌트로 이동할 경우 middleware가 실행되지 않기 때문에, 특정 로직 상 무조건 리다이렉트가 필요할 경우 Link 클릭을 button의 onClick이벤트에서 router로 구현하시면 될 것 같습니다.

페이지의 라우트 그루핑은 명시적으로 일단 하지 않았습니다.(작업 충돌 방지 목적)

✅ Checklist

PR

• Branch Convention 확인

  feat/* 기능 구현, fix/* 버그 수정, refactor/* 개선

• Base Branch 확인
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test

• 로컬 작동 확인

Additional Notes

• 쿠키 설정 로직 재추가
• 쿠키 sameSite lax로 변경

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
taskify	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 9, 2025 7:58am

[cksrlcks]

오 이제 클라이언트에서는 axiosClientHelper로 그냥 요청보내기만하면
알아서 토큰도 붙여서 진행되게 하신거네요

http only 쿠키에 안전하게 접근해서, nextjs서버가 클라이언트 대신 백앤드api에 요청해서,
다시 클라이언트에게 전달하는 방신이네요!

저도 다음에 이렇게 한번 해봐야겠습니당.ㅎ

httponly쿠키로 하신다고 하셔서, 모든 api 요청함수를 api route핸들러로 만들어야하나 걱정했는데 이런 좋은 방법이 있었네요(참고로 vercel 무료배포시 serverless함수가 12개로 제한되는데, 이렇게하면 빌드시 한개로 뜨는지 한번봐야겟어욤 ㅋㅋ)

[cksrlcks]

PR이 메인에 머지되고 나면, 제가 작성했던 dashboard쪽 api 서비스 함수에 axios helper 교체건으로 pr한번 다시 올리겠습니다.

[rak517]

주말인데 고생하셨습니다! 코드 확인해 봤는데 좋은 방법인거 같습니다🫡