diff --git a/fe/src/api/axios.ts b/fe/src/api/axios.ts index b093e227..dff0ab59 100644 --- a/fe/src/api/axios.ts +++ b/fe/src/api/axios.ts @@ -11,7 +11,7 @@ const CreateServiceApi = (service: string): AxiosInstance => { const portMap: ServiceEndpoints = { review: 8082, member: 8081, - notifictation: 8084, + notification: 8084, // 다른 서비스들의 포트 번호 추가 }; @@ -28,9 +28,49 @@ const CreateServiceApi = (service: string): AxiosInstance => { // Interceptor를 사용하여 accessToken을 요청에 추가 // const { authToken } = useAuthStore(); // const accessToken = localStorage.getItem('accessToken'); + api.interceptors.response.use( + (response) => { + return response; + }, + async (error) => { + const { + config, + response: { status }, + } = error; + + const originalRequest = config; + + if (status === 403) { + const accessToken = localStorage.getItem('access'); + const refreshToken = localStorage.getItem('refresh'); + + try { + const { data } = await axios({ + method: 'post', + url: '/members/token', + data: { accessToken, refreshToken }, + }); + const newAccessToken = data.data.accessToken; + const newRefreshToken = data.data.refreshToken; + originalRequest.headers = { + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + newAccessToken, + }; + localStorage.setItem('access', newAccessToken); + localStorage.setItem('refresh', newRefreshToken); + return await axios(originalRequest); + } catch (error) { + console.error(error); + // locate 사용해보기 (이것도 관점!) window.locate.을 이용해서 홈화면으로 에러시 보내버려라! + // 토큰 발급된거 삭제하기 -> 로컬에 들어간거 따라서 저장해놨으니까, 빼놓는것도 추가를 해야 순수한 함수이고, 에러처리가 된다! + } + } + }, + ); api.interceptors.request.use((config) => { - config.headers.Authorization = 'Bearer accessToken'; + const accessToken = localStorage.getItem('access'); + config.headers.Authorization = `Bearer ${accessToken}`; return config; }); return api; diff --git a/fe/src/api/memberApi.ts b/fe/src/api/memberApi.ts index 75ddd0f9..52154ce1 100644 --- a/fe/src/api/memberApi.ts +++ b/fe/src/api/memberApi.ts @@ -1,4 +1,4 @@ -import axios from 'axios'; +import axios, { isAxiosError } from 'axios'; import clientApi from './axios'; import { v4 as uuidv4 } from 'uuid'; @@ -17,13 +17,19 @@ const memberApi = { //!아래 API까지는 accessToken - null인 상태로 날아가게 됩니다! //회원가입 [post] signUp: async ({ certification, password }: userProps) => { - return await axios.post( - `${baseURL}/api/v1/members/`, - { certification, password }, - { - headers: headers, - }, - ); + return await axios + .post( + `${baseURL}/api/v1/members/`, + { certification, password }, + { + headers: headers, + }, + ) + .catch((e) => { + if (isAxiosError(e)) { + e.status; + } + }); }, //로그인 [post] login: async ({ certification, password }: userProps) => { diff --git a/fe/src/hooks/query/member/useRefreshToken.ts b/fe/src/hooks/query/member/useRefreshToken.ts index a70d3187..fa8930c5 100644 --- a/fe/src/hooks/query/member/useRefreshToken.ts +++ b/fe/src/hooks/query/member/useRefreshToken.ts @@ -1,22 +1,47 @@ -import memberApi from '@api/memberApi'; -import { useMutation } from '@tanstack/react-query'; +// import memberApi from '@api/memberApi'; +// import { useMutation } from '@tanstack/react-query'; +// import axios from 'axios'; -const useRefreshToken = () => { - return useMutation({ - mutationFn: memberApi.refreshToken, - onSuccess: (data) => { - console.log('요청 성공'); - console.log(data); - }, - onError: (err) => { - console.error('에러 발생'); - console.log(err); - }, - onSettled: (data) => { - console.log('결과에 관계 없이 무언가 실행됨'); - console.log(data); - }, - }); -}; +// const useRefreshToken = () => { +// return useMutation({ +// mutationFn: memberApi.refreshToken, +// onSuccess: async (data) => { +// console.log('요청 성공'); +// console.log(data); -export default useRefreshToken; +// const tokenData = data?.data?.data; + +// const access = tokenData.accessToken; +// const refresh = tokenData.refreshToken; +// console.log(access, refresh); +// if (access && refresh) { +// localStorage.setItem('access', access); + +// const lastApiEndpoint = localStorage.getItem('lastApiEndpoint'); + +// if (lastApiEndpoint !== null) { +// const response = await axios.get(lastApiEndpoint, { +// headers: { +// Authorization: `Bearer ${access}`, +// }, +// }); + +// // 이후 response를 처리하거나 필요에 따라 상태 업데이트 등을 수행 +// console.log('API 다시 요청 결과:', response.data); +// } else { +// console.error('마지막 API 엔드포인트가 없습니다.'); +// } +// } +// }, +// onError: (err) => { +// console.error('에러 발생'); +// console.log(err); +// }, +// onSettled: (data) => { +// console.log('결과에 관계 없이 무언가 실행됨'); +// console.log(data); +// }, +// }); +// }; + +// export default useRefreshToken;