[feature] 공용 axios 인스턴스 및 Authorization 자동 첨부 #56
Conversation
|
@jeschun is attempting to deploy a commit to the projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
sohyun0
left a comment
sohyun0
left a comment
There was a problem hiding this comment.
고생하셨습니다 ! 코멘트 확인 부탁드립니다
또한, any 타입을 제외한 모든 사항은 시간 여유가 있을때 리팩토링 제안이므로 참고해주세요!
src/lib/axios/index.ts
Outdated
| axiosInstance.interceptors.request.use(config => { | ||
| // SSR에서는 localStorage가 없으니 브라우저에서만 읽기 | ||
| const token = typeof window !== 'undefined' ? localStorage.getItem('thejulge_token') : null; | ||
| if (token) { | ||
| // Axios v1: headers가 AxiosHeaders(클래스)일 수 있음 | ||
| const h = config.headers as any; | ||
| if (h?.set && typeof h.set === 'function') { | ||
| // 1) AxiosHeaders 인스턴스인 경우: set API 지원 | ||
| h.set('Authorization', `Bearer ${token}`); | ||
| } else { | ||
| // 2) 평범한 객체인 경우: 속성만 추가 (전체 재할당 금지) | ||
| config.headers = config.headers ?? {}; | ||
| (config.headers as any).Authorization = `Bearer ${token}`; | ||
| } | ||
| } | ||
| return config; | ||
| }); |
There was a problem hiding this comment.
eslint 규칙에 any 타입을 쓰면 vercel 에서 error 를 발생하면서 배포가 막혀있습니다! axios 포함, testAuth 페이지의 any 타입을 변경해야할것 같습니다!
그리고 axios v1 + any 타입 해결책으로는 new AxiosHeaders() 인스턴스로 생성하여 통일하는 방법이 있습니다.
import axios, { AxiosInstance, AxiosHeaders, InternalAxiosRequestConfig } from 'axios';
const axiosInstance: AxiosInstance = axios.create({
baseURL: process.env.NEXT_PUBLIC_API_URL,
headers: new AxiosHeaders({ 'Content-Type': 'application/json' }),
// 타입을 확정지을 수 있도록 AxiosHeaders로 초기화
});
axiosInstance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
// SSR 방어
if (typeof window === 'undefined') return config;
const token = localStorage.getItem('thejulge_token');
if (token) {
config.headers.set('Authorization', `Bearer ${token}`);
}
return config;
});
참고했던 블로그도 같이 첨부드릴게요!
블로그
There was a problem hiding this comment.
해당 페이지 any 타입 사용으로 인해 vercel 배포가 막혀있습니다! 수정 부탁드립니다!
src/context/authProvider.tsx
Outdated
| const value: AuthContextValue = { | ||
| ...values, | ||
| isLogin, | ||
| role, | ||
| user, | ||
| login, | ||
| logout, | ||
| signup, |
There was a problem hiding this comment.
추후 시간이 남는다면 useMemo로 리팩토링을 해볼 수 있을것 같습니다! (제안)
isLogin, role, user 와 같은 값은 다시 계산이 일어나지 않게 할수도 있을것 같습니다!
모든 함수에 useCallback 을 넣는다면 모두다 디펜던시로 넣을 수도 있을것 같구요 !
src/context/authProvider.tsx
Outdated
| if (typeof window !== 'undefined') { | ||
| localStorage.setItem(TOKEN_KEY, newToken); | ||
| localStorage.setItem(USER_ID_KEY, newUserId); | ||
| } |
There was a problem hiding this comment.
해당 패턴이 계속 반복되고 있어서 추후 시간이 남는다면 유틸함수로 컨트롤하게 리팩토링 할 수 있을것 같습니다! (제안)
2 participants
📝 작업 개요 (필수)
공용 axios 인스턴스 도입 및 Authorization: Bearer 자동 첨부 구조 구축.
추가로 AuthProvider 전역 상태(토큰/사용자ID/내 정보)와 표준 함수(login / logout / getUser / updateUser)를 제공하고, 브라우저에서 바로 점검 가능한 **테스트 페이지(pages/testAuth.tsx)**를 추가했습니다.
✨ 작업 내용 (필수)
📸 스크린샷
🧐 해결해야 하는 문제
🤔 리뷰어 확인 필요 사항
🔗 관련 이슈
🛠️ 후속 작업
✅ 체크리스트 (필수)