[feat] 메인 401 요청 처리

Soongsil-CoffeeChat · Jul 3, 2024 · 402a7e3 · 402a7e3
1 parent 15db204
commit 402a7e3
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 16 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -29,7 +29,7 @@ export default App;
 
 const Body = styled.div`
   margin: 0 auto;
-  max-width: 400px;
+  max-width: 420px;
   min-width: 360px;
   margin: 0 auto;
 `;
diff --git a/src/apis/axiosConfig.js b/src/apis/axiosConfig.js
@@ -0,0 +1,79 @@
+import axios from "axios";
+import { useRecoilState } from "recoil";
+import { authState } from "../atoms/authState.ts";
+import { useNavigate } from "react-router-dom";
+
+// Axios 인스턴스 생성
+const axiosInstance = axios.create({
+  baseURL: "https://cogo.life",
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// Axios 인터셉터 설정
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+    const [auth, setAuth] = useRecoilState(authState);
+
+    if (error.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+
+      try {
+        const res = await axiosInstance.post("/reissue");
+
+        if (res.status === 200) {
+          const accessToken = res.headers["access"];
+          setAuth({
+            isLoggedIn: true,
+            username: null,
+            token: accessToken,
+          });
+          localStorage.setItem("token", accessToken);
+
+          originalRequest.headers["Authorization"] = `Bearer ${accessToken}`;
+          return axiosInstance(originalRequest);
+        }
+      } catch (reissueError) {
+        console.error("Token reissue failed:", reissueError);
+        setAuth({ isLoggedIn: false, username: null, token: null });
+        localStorage.removeItem("token");
+        localStorage.setItem("isLoggedIn", "false");
+      }
+    }
+
+    if (error.response.status === 302) {
+      const location = error.response.headers["location"];
+      if (location && location.includes("/login")) {
+        try {
+          const res = await axiosInstance.post("/reissue");
+
+          if (res.status === 200) {
+            const accessToken = res.headers["access"];
+            setAuth({
+              isLoggedIn: true,
+              username: null,
+              token: accessToken,
+            });
+            localStorage.setItem("token", accessToken);
+
+            originalRequest.headers["Authorization"] = `Bearer ${accessToken}`;
+            return axiosInstance(originalRequest);
+          }
+        } catch (reissueError) {
+          console.error("Token reissue failed:", reissueError);
+          setAuth({ isLoggedIn: false, username: null, token: null });
+          localStorage.removeItem("token");
+          localStorage.setItem("isLoggedIn", "false");
+        }
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+export default axiosInstance;
diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
@@ -5,6 +5,7 @@ import { authState } from "../../atoms/authState";
 import { useRecoilState } from "recoil";
 import LeftButton from "../../assets/LeftButton.svg";
 import RightButton from "../../assets/RightButton.svg";
+import axiosInstance from "../../apis/axiosConfig";
 
 type MentorCategory = {
   기획: "PM";
@@ -76,18 +77,16 @@ function Main() {
   }, [auth.token]);
 
   const getMentorData = () => {
-    const url = `https://cogo.life/api/v1/mentor/${mentorCategory[activeButtons]}`;
-
-    fetch(url, {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${auth.token}`,
-        "Content-Type": "application/json",
-      },
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        setMentorData(data);
+    const url = `/api/v1/mentor/${mentorCategory[activeButtons]}`;
+
+    axiosInstance
+      .get(url, {
+        headers: {
+          Authorization: `Bearer ${auth.token}`,
+        },
+      })
+      .then((response) => {
+        setMentorData(response.data);
       })
       .catch((error) => {
         console.error("Error:", error);
@@ -136,7 +135,8 @@ function Main() {
               <styles.HeaderProfileButton
                 key={buttonName}
                 active={activeButtons.includes(buttonName)}
-                onClick={() => handleProfileButtonClick(buttonName)}>
+                onClick={() => handleProfileButtonClick(buttonName)}
+              >
                 {buttonName}
               </styles.HeaderProfileButton>
             ))}
@@ -150,7 +150,8 @@ function Main() {
               active={activeButtons.includes(buttonName)}
               onClick={() => {
                 handleButtonClick(buttonName as keyof MentorCategory);
-              }}>
+              }}
+            >
               {buttonName}
             </styles.HeaderButton>
           ))}
@@ -202,7 +203,8 @@ function Main() {
                       : mentorData[currentIndex].username,
                 },
               });
-            }}>
+            }}
+          >
             코고 신청하기
           </styles.ApplyButton>
         </styles.BodyIntroduce>