Merge pull request #280 from Team-Ampersand/fix/token-refresh

🔀토큰 오염 에러 해결

src/api/member.ts

@@ -1,9 +1,9 @@
 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';
 
 export const signin = async (id: string, password: string) => {
   try {
@@ -149,12 +149,21 @@ export const tokenReissue = async (
       }
     );
     newAuthorization = data.accessToken;
-    setCookie(ctx, 'Authorization', `Bearer ${newAuthorization}`, {
-      expires: data.accessExp,
-      path: '/',
-    });
+    refreshToken = data.refreshToken;
+    setToken(
+      data.accessToken,
+      data.accessExp,
+      data.refreshToken,
+      data.refreshExp,
+      null
+    );
     return { newAuthorization };
-  } catch (e: any) {}
+  } catch (e: any) {
+    removeToken();
+    if (typeof window !== 'undefined') {
+      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

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