diff --git a/src/App.js b/src/App.js index 3e5e2ba..45350d2 100644 --- a/src/App.js +++ b/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 ( + } /> } /> @@ -30,4 +60,5 @@ function App() { ); } + export default App; diff --git a/src/loginPage/LoginPage.jsx b/src/loginPage/LoginPage.jsx index cbd9024..14c5b88 100644 --- a/src/loginPage/LoginPage.jsx +++ b/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`;