Merge pull request #31 from JNU-econovation/Book-Detail-Page

feat: 리프레쉬 토큰을 통해 벡인드에 새로운 엑세스 토큰 요청
JNU-econovation · Aug 20, 2024 · cc6732d · cc6732d
2 parents 7561188 + 464b699
commit cc6732d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 8 deletions.
diff --git a/src/api/axiosInstance.js b/src/api/axiosInstance.js
@@ -3,12 +3,11 @@ import axios from "axios";
 axios.defaults.withCredentials = true;
 
 export const axiosInstance = axios.create({
-  baseURL: "https://b6dc-168-131-35-101.ngrok-free.app",
+  baseURL: import.meta.env.VITE_BASE_URL,
   headers: {
-    // "withCredentials": true,
+    "withCredentials": true,
     "Access-Control-Allow-Credentials": true,
     "ngrok-skip-browser-warning": true,
-    // "Accept": "application/json, text/plain",
   },
   mode: "cors"
 });
@@ -21,3 +20,32 @@ axiosInstance.interceptors.request.use((config) => {
   return config;
 });
 
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;  
+
+      try {
+        const refreshToken = localStorage.getItem("refreshToken");
+        const response = await axiosInstance.post("/members/refresh", { refreshToken });
+
+        if (response.status === 200) {
+          const reAccessToken = response.data.accessToken;
+          localStorage.setItem("accessToken", reAccessToken);
+
+          originalRequest.headers.Authorization = `Bearer ${reAccessToken}`;
+          return axiosInstance(originalRequest);  
+        }
+      } catch (err) {
+        console.error(err);
+        localStorage.removeItem("accessToken");
+        localStorage.removeItem("refreshToken");
+        alert('로그아웃 되었습니다.');
+        window.location.href = "/login";
+      }
+    }
+  }
+);
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -8,6 +8,7 @@ export default function Header() {
   const [headerId, setHeaderId] = useState("");
   const navigate = useNavigate();
   const accessToken = localStorage.getItem("accessToken");
+
   const onClick = () => {
     localStorage.removeItem("accessToken");
     window.location.reload();

diff --git a/src/components/LogIn/LoginForm.jsx b/src/components/LogIn/LoginForm.jsx
@@ -31,13 +31,17 @@ export default function LoginForms() {
       id,
       password,
     };
-    console.log(data)
+
     try {
       const response = await axiosInstance.post("/members/login", data);
-      console.log('백엔드에 로그인 정보 보내기 성공', response.data.response.accessToken)
-      if (response.data.response.accessToken) {
-        localStorage.setItem("accessToken", response.data.response.accessToken);
-        console.log("accessToken 저장 성공");
+      const access = response.data.response.accessToken;
+      const refresh = response.data.response.refreshToken;
+
+      if (access && refresh) {
+        localStorage.setItem("accessToken", access);
+        localStorage.setItem('refreshToken', refresh)
+        console.log("accessToken 저장 성공", access);
+        console.log("refreshToken 저장 성공", refresh)
         navigator("/");
       }
     } catch (error) {