🔀토큰 오염 에러 해결

src/api/member.ts

@@ -1,6 +1,7 @@
 import { GetServerSidePropsContext } from 'next';
 import { toast } from 'react-toastify';
 import { apiClient } from 'utils/Libs/apiClient';
+import { removeToken } from 'utils/Libs/removeToken';
 import { MemberController } from 'utils/Libs/requestUrls';
 import { setToken } from 'utils/Libs/setToken';
 import { setCookie } from 'nookies';
@@ -154,7 +155,10 @@ export const tokenReissue = async (
       path: '/',
     });
     return { newAuthorization };
-  } catch (e: any) {}
+  } catch (e: any) {
+    removeToken();
+    window.location.href = '/signin';
+  }
 };
 
 export const postProfileImage = async (image: Blob | string) => {

src/utils/Libs/apiClient.ts

@@ -1,10 +1,47 @@
 import axios from 'axios';
 import BASE_HEADER from '../Config/Config.json';
 import { getRefresh } from './getRefresh';
+import { tokenReissue } from 'api/member';
+import { MemberController } from './requestUrls';
+import { setToken } from './setToken';
+import { getToken } from './getToken';
 
 export const apiClient = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
   headers: BASE_HEADER,
 });
 
-apiClient.interceptors.request.use(getRefresh);
+apiClient.interceptors.response.use(
+  function (response) {
+    return response;
+  },
+  async function (err) {
+    const originalRequest = err.config;
+
+    if (
+      err.response &&
+      (err.response.status === 401 || err.response.status === 403) &&
+      !originalRequest._retry
+    ) {
+      originalRequest._retry = true;
+
+      try {
+        const { RefreshToken } = await getToken(null);
+        const tokenResponse = await tokenReissue(
+          'Bearer ' + RefreshToken,
+          null
+        );
+
+        if (tokenResponse && tokenResponse.newAuthorization) {
+          originalRequest.headers['Authorization'] =
+            'Bearer ' + tokenResponse.newAuthorization;
+          return apiClient(originalRequest);
+        }
+      } catch (refreshError) {
+        return Promise.reject(refreshError);
+      }
+    }
+
+    return Promise.reject(err);
+  }
+);

src/utils/Libs/getRefresh.ts

@@ -1,12 +1,17 @@
 import { AxiosRequestConfig } from 'axios';
 import { tokenReissue } from '../../api/member';
 import { getToken } from './getToken';
+import { MemberController } from './requestUrls';
 
 export const getRefresh = async (config: AxiosRequestConfig) => {
   if (typeof window !== 'object') return config;
   const { Authorization, RefreshToken } = await getToken(null);
 
-  if (config.headers && Authorization) {
+  if (
+    config.headers &&
+    Authorization &&
+    !config.url?.includes(MemberController.auth)
+  ) {
     config.headers['Authorization'] = Authorization;
   } else if (
     !Authorization &&

src/utils/Libs/getToken.ts

@@ -8,12 +8,10 @@ export const getToken = async (ctx: GetServerSidePropsContext | null) => {
     let RefreshToken = ctx.req.cookies['RefreshToken'] || '';
 
     if (!RefreshToken) return {};
-    if (!Authorization) {
-      try {
-        const response = await tokenReissue(RefreshToken, ctx);
-        Authorization = response?.newAuthorization || '';
-      } catch {
-        return {};
+    else if (!Authorization) {
+      const { newAuthorization }: any = await tokenReissue(RefreshToken, ctx);
+      if (newAuthorization) {
+        Authorization = newAuthorization;
       }
     }