[Fe/#248] token reissuance

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;

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) => {

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;