Merge pull request #55 from DevKor-github/api/signUp

fix: client & refresh 로직

libs/client/AuthProvider.tsx

@@ -8,10 +8,13 @@ export function AuthProvider() {
   const { accessToken, refreshToken, setTokens, clearTokens } = useAuthStore((state) => state);
 
   useEffect(() => {
+    console.log('zustand 저장 값');
+    console.log(accessToken, refreshToken);
     if (accessToken === null) {
       if (refreshToken === null) {
         const accessTokenFromCookie = getCookie('access-token');
         const refreshTokenFromCookie = getCookie('refresh-token');
+        console.log('쿠키 저장 값');
         console.log(accessTokenFromCookie, refreshTokenFromCookie);
 
         if (accessTokenFromCookie === null || refreshTokenFromCookie === null) {

libs/client/client.ts

@@ -1,16 +1,20 @@
+import { useRefresh } from '@/libs/client/refresh';
 import { useAuthStore } from '@/libs/store/useAuthStore';
 import axios from 'axios';
 
 const client = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_API_URL,
+  baseURL: process.env.NEXT_PUBLIC_API_URL ?? '',
   withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+  },
 });
 
 client.interceptors.request.use(
   (config) => {
     const { accessToken } = useAuthStore();
-    if (accessToken) {
-      config.headers.Authorization = `Bearer ${accessToken}`;
+    if (accessToken && config.headers) {
+      config.headers['Authorization'] = `Bearer ${accessToken}`;
     }
     return config;
   },
@@ -22,30 +26,13 @@ client.interceptors.response.use(
   async (error) => {
     const { config, response } = error;
     const originalRequest = config;
+    if (response?.status === 401) {
+      const { refresh } = useRefresh();
+      const newAccessToken = await refresh();
 
-    if (response?.status === 401 && !originalRequest._retry) {
-      originalRequest._retry = true;
-      const { refreshToken, setTokens, clearTokens } = useAuthStore();
-      try {
-        const { data } = await axios.post<{ accessToken: string; refreshToken: string }>(
-          `${process.env.NEXT_PUBLIC_API_URL}/auth/refresh`,
-          {},
-          {
-            headers: {
-              Authorization: `Bearer ${refreshToken}`,
-            },
-            withCredentials: true,
-          },
-        );
-
-        setTokens(data.accessToken, data.refreshToken);
-
-        originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
-        return client(originalRequest);
-      } catch (err) {
-        clearTokens();
-        // 필요시 로그아웃 처리
-        return Promise.reject(err);
+      if (newAccessToken !== null) {
+        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+        return client.request(originalRequest);
       }
     }
 

libs/client/refresh.ts

@@ -0,0 +1,27 @@
+import { useAuthStore } from '@/libs/store/useAuthStore';
+import axios from 'axios';
+
+export const useRefresh = () => {
+  const { refreshToken, setTokens, clearTokens } = useAuthStore();
+
+  const refresh = async () => {
+    try {
+      const res = await axios.post(
+        `${process.env.NEXT_PUBLIC_API_URL}/auth/refresh`,
+        {},
+        { headers: { Authorization: `Bearer ${refreshToken}` } },
+      );
+      if (res.data.accessToken && res.data.refreshToken) {
+        setTokens(res.data.accessToken, res.data.refreshToken);
+        return res.data.accessToken as string;
+      }
+    } catch (err) {
+      console.log(err);
+    }
+    clearTokens();
+
+    return null;
+  };
+
+  return { refresh };
+};