Merge pull request #118 from LikeLionHGU/jonghyun_feat/#115

feat: 로그인 세션만료 처리 추가

src/App.js

@@ -1,6 +1,7 @@
-import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { RecoilRoot } from "recoil";
+import React, { useEffect } from "react";
+import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom";
+import { RecoilRoot, useSetRecoilState } from "recoil";
+import axios from "axios";
 import LoginPage from "./loginPage/LoginPage";
 import Hompage from "./homepage/HomePage";
 import DiaryListPage from "./diaryListPage/DiaryListPage";
@@ -10,11 +11,40 @@ import Loading from "./loginPage/Loading";
 import DiaryBotPage from "./diaryBotPage/DiaryBotPage";
 import DiaryDetailPage from "./diaryDetailPage/DiaryDetailPage";
 import UpdateDiary from "./diaryWritePage/components/UpdateDiary";
+import { tokenState, UserTokenState } from "./atom/atom"; // Your recoil atoms
+
+const AxiosInterceptor = () => {
+  const setCsrfToken = useSetRecoilState(tokenState);
+  const setUserTokenState = useSetRecoilState(UserTokenState);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const responseInterceptor = axios.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response && error.response.status === 401) {
+          console.log("Axios interceptor caught an error:", error); // 로그 추가
+          setCsrfToken(null);
+          setUserTokenState({ isLogin: false });
+          navigate("/");
+        }
+        return Promise.reject(error);
+      }
+    );
+
+    return () => {
+      axios.interceptors.response.eject(responseInterceptor);
+    };
+  }, [navigate, setCsrfToken, setUserTokenState]);
+
+  return null;
+};
 
 function App() {
   return (
     <RecoilRoot>
       <BrowserRouter>
+        <AxiosInterceptor />
         <Routes>
           <Route path="/" element={<LoginPage />} />
           <Route path="/HomePage" element={<Hompage />} />
@@ -30,4 +60,5 @@ function App() {
     </RecoilRoot>
   );
 }
+
 export default App;

src/loginPage/LoginPage.jsx

@@ -1,5 +1,8 @@
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
+import { UserTokenState } from "../atom/atom";
+import { useEffect } from "react";
 
 const Wrapper = styled.div`
   display: flex;
@@ -24,6 +27,14 @@ const GoogleLoginBtn = styled.div`
 `;
 
 const LoginPage = () => {
+  const navigate = useNavigate();
+  const UserToken = useRecoilValue(UserTokenState);
+
+  useEffect(() => {
+    if (UserToken !== false) {
+      navigate(`/HomePage`);
+    }
+  }, [UserToken]);
   const handleGoogleLogin = () => {
     // 구글 로그인 화면으로 이동시키기
     window.location.href = `${process.env.REACT_APP_HOST_URL}/oauth2/authorization/google`;