From 667071b50b978c99e43640ec21c9644d9cb03d10 Mon Sep 17 00:00:00 2001 From: Klomachenko Date: Fri, 2 Feb 2024 18:08:59 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20token=20reissuance=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Related to 토큰 재발급 기능 구현 #248 --- fe/src/api/axios.ts | 42 ++++++++++++- fe/src/hooks/query/member/useRefreshToken.ts | 65 ++++++++++++++------ 2 files changed, 85 insertions(+), 22 deletions(-) diff --git a/fe/src/api/axios.ts b/fe/src/api/axios.ts index b093e227..f15f30b7 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,47 @@ 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/reissue', + 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); + } + } + }, + ); 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/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; From 7f78c1058a6a8a34f39c19bc9a05cd6716e2fed8 Mon Sep 17 00:00:00 2001 From: Klomachenko Date: Fri, 2 Feb 2024 18:15:56 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20code=20=EC=98=A4=ED=83=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/api/axios.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fe/src/api/axios.ts b/fe/src/api/axios.ts index f15f30b7..8f09bb62 100644 --- a/fe/src/api/axios.ts +++ b/fe/src/api/axios.ts @@ -47,7 +47,7 @@ const CreateServiceApi = (service: string): AxiosInstance => { try { const { data } = await axios({ method: 'post', - url: '/members/reissue', + url: '/members/token', data: { accessToken, refreshToken }, }); const newAccessToken = data.data.accessToken; From d82dc5305d56b0145e4bd0a881ab919728bb7768 Mon Sep 17 00:00:00 2001 From: Klomachenko Date: Fri, 2 Feb 2024 18:28:53 +0900 Subject: [PATCH 3/4] =?UTF-8?q?style:=20=EC=A3=BC=EC=84=9D=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/api/axios.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/fe/src/api/axios.ts b/fe/src/api/axios.ts index 8f09bb62..dff0ab59 100644 --- a/fe/src/api/axios.ts +++ b/fe/src/api/axios.ts @@ -61,6 +61,8 @@ const CreateServiceApi = (service: string): AxiosInstance => { return await axios(originalRequest); } catch (error) { console.error(error); + // locate 사용해보기 (이것도 관점!) window.locate.을 이용해서 홈화면으로 에러시 보내버려라! + // 토큰 발급된거 삭제하기 -> 로컬에 들어간거 따라서 저장해놨으니까, 빼놓는것도 추가를 해야 순수한 함수이고, 에러처리가 된다! } } }, From d459a72b8c58498d1ab24911d1379223fa12504b Mon Sep 17 00:00:00 2001 From: Klomachenko Date: Sun, 4 Feb 2024 15:26:17 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20error=20=EB=B0=98=ED=99=98=20?= =?UTF-8?q?=EB=B0=A9=EB=B2=95=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/api/memberApi.ts | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) 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) => {