From c716f8fd4abd55e57a62b31d5e57556c26d03331 Mon Sep 17 00:00:00 2001 From: jumpm9239 Date: Thu, 23 May 2024 21:53:48 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=ED=86=A0=ED=81=B0=20=EB=A7=8C?= =?UTF-8?q?=EB=A3=8C=20=EC=8B=9C=20=EC=9E=90=EB=8F=99=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=95=84=EC=9B=83,=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=B0=BD?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.tsx | 31 ++++++++++++---------- client/src/components/ProtectedRoute.tsx | 33 ++++++++++++++++++++++++ 2 files changed, 51 insertions(+), 13 deletions(-) create mode 100644 client/src/components/ProtectedRoute.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index 7ad636f..81332b7 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { Provider } from 'react-redux'; import './App.css'; @@ -21,6 +21,8 @@ import MyPageMain from './pages/MyPageMain'; import MyPageInfo from './pages/MyPageInfo'; import MyPost from './pages/MyPost'; +import ProtectedRoute from 'components/ProtectedRoute'; + const App: React.FC = () => { return ( @@ -28,20 +30,23 @@ const App: React.FC = () => { - } /> + } /> } /> - } /> - - } /> - } /> - } /> - } /> - } /> - - } /> - } /> - } /> + }> + } /> + } /> + + } /> + } /> + } /> + } /> + } /> + + } /> + } /> + } /> + diff --git a/client/src/components/ProtectedRoute.tsx b/client/src/components/ProtectedRoute.tsx new file mode 100644 index 0000000..d857e6b --- /dev/null +++ b/client/src/components/ProtectedRoute.tsx @@ -0,0 +1,33 @@ +import React, { useEffect } from 'react'; +import { Navigate, Outlet } from 'react-router-dom'; + +const logout = (): void => { + localStorage.removeItem('accessToekn'); +} + +const ProtectedRoute: React.FC = () => { + const getAccessToken = (): string | null => { + return localStorage.getItem('accessToken'); + } + + const isTokenExpired = (token: string | null): boolean => { + if (!token) return true; + + const payload = JSON.parse(atob(token.split('.')[1])); + const currentTime = Math.floor(Date.now() / 1000); + + return payload.exp < currentTime; + } + + const token = getAccessToken(); + const isExpired = isTokenExpired(token); + + if (isExpired) { + logout(); + return ; + } + + return ; +}; + +export default ProtectedRoute; \ No newline at end of file From 20723cec62b3f28e0845313e2b1e64e01b22f143 Mon Sep 17 00:00:00 2001 From: jumpm9239 Date: Thu, 23 May 2024 22:17:47 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=EB=90=98=EC=97=88=EC=9C=BC=EB=AF=80=EB=A1=9C=20?= =?UTF-8?q?=EC=9E=AC=EB=A1=9C=EA=B7=B8=EC=9D=B8=ED=95=B4=EB=8B=AC=EB=9D=BC?= =?UTF-8?q?=EB=8A=94=20=EB=A9=94=EC=84=B8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/ProtectedRoute.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ProtectedRoute.tsx b/client/src/components/ProtectedRoute.tsx index d857e6b..992c1b7 100644 --- a/client/src/components/ProtectedRoute.tsx +++ b/client/src/components/ProtectedRoute.tsx @@ -24,7 +24,7 @@ const ProtectedRoute: React.FC = () => { if (isExpired) { logout(); - return ; + return ; } return ; From 8978f958f3d9156180862b83861cf3ce95a236b5 Mon Sep 17 00:00:00 2001 From: jumpm9239 Date: Sun, 26 May 2024 16:49:24 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=83=81=ED=83=9C=EC=97=90=EC=84=9C=20=EA=B8=80?= =?UTF-8?q?=EC=93=B0=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=8B=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=A1=9C=20=EC=95=88=EB=82=B4=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EC=95=8C=EB=9E=8C=EC=B0=BD=20=EB=84=A3=EC=9D=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/GuestHeader.tsx | 14 ++++++++++---- client/src/pages/LoginPage.tsx | 2 +- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/client/src/components/GuestHeader.tsx b/client/src/components/GuestHeader.tsx index 3e6c46a..8177579 100644 --- a/client/src/components/GuestHeader.tsx +++ b/client/src/components/GuestHeader.tsx @@ -1,16 +1,22 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPencil, faRightToBracket } from "@fortawesome/free-solid-svg-icons"; import { GuestHeaderProps } from 'types/types.ts'; import logo from '../assets/logo.png'; -const GuestHeader: React.FC = ( { isLoggedIn } ) => { +const GuestHeader: React.FC = ({ isLoggedIn }) => { + const navigate = useNavigate(); if (isLoggedIn) { return null; } + const handleWriteCilck = () => { + alert('로그인 후 글쓰기가 가능합니다. 로그인 페이지로 이어드릴게요.'); + navigate('/login'); + }; + return (
@@ -18,9 +24,9 @@ const GuestHeader: React.FC = ( { isLoggedIn } ) => { logo
- +
- +
diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx index c13f226..2a4967e 100644 --- a/client/src/pages/LoginPage.tsx +++ b/client/src/pages/LoginPage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { postLogin } from 'api/api.js'; import { useDispatch } from 'react-redux'; import { setActiveMenu } from '../store/menuSlice.ts'; From 964c31afdc8ca641be64646422efabe9fa73d82a Mon Sep 17 00:00:00 2001 From: jumpm9239 Date: Sun, 26 May 2024 17:40:40 +0900 Subject: [PATCH 4/4] =?UTF-8?q?chore:=20=ED=86=A0=ED=81=B0=20=EB=A7=8C?= =?UTF-8?q?=EB=A3=8C=20=EC=8B=9C=EC=97=90=EB=8F=84=20=EA=B8=80=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=EB=8A=94=20=EA=B0=80=EB=8A=A5=ED=95=98=EA=B2=8C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index 81332b7..4efabf9 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -33,16 +33,17 @@ const App: React.FC = () => { } /> } /> + + } /> + } /> + } /> + } /> + } /> + } /> + }> - } /> } /> - } /> - } /> - } /> - } /> - } /> - } /> } /> } />