implement logout

backend/src/index.js

@@ -87,6 +87,25 @@ app.post('/login', async (req, res) => {
 
 });
 
+app.get("/logout", (req, res) => {
+	console.log("로그아웃");
+	if (req.session.sessionid) {
+		
+		console.log("로그아웃중입니다!");
+		req.session.destroy((err) => {
+			if (err) {
+				console.log("세션 삭제시에 에러가 발생했습니다.");
+				return;
+			}
+			console.log("세션이 삭제됐습니다.");
+		});
+		res.clearCookie('name');
+		res.send(req.body.name);
+	} else {
+		console.log("로그인이 안돼있으시네요?");
+		res.send(req.body.name);
+	}
+});
 
 
 

frontend/src/App.js

@@ -2,20 +2,28 @@ import "./App.css";
 import {Routes, Route } from 'react-router-dom';
 import Header from "./Header.js";
 import Main from "./Main.js";
+import Login from "./Login.js";
 import Search from "./Search.js";
 import GoogleLoginButton from "./GoogleLoginButton.js";
+import React, { useEffect, useState, useContext} from 'react';
+import { UserContext } from './Usercontext.js';
 
 function App() {
+	
+	const [ myName, setMyName] = useState(null);
+	
   return(
     <div className="App">
-      <Header/>
-      <Routes>
-        <Route path="/" element={<Main/>}></Route>
-        <Route path="/search" element={<Search/>}></Route>
-    {/* <Route path="/postwrite" element={<PostWrite/>}></Route> */}
-      </Routes>
-      <GoogleLoginButton/>
-      {/* <Footer/> */}
+		<UserContext.Provider value={setMyName}>
+			<Header user={myName}></Header>
+			<Routes>
+				<Route path="/" element={<Main/>}></Route>
+				<Route path="/login" element={<Login/>}></Route>
+				<Route path="/search" element={<Search/>}></Route>
+			{/* <Route path="/postwrite" element={<PostWrite/>}></Route> */}
+			</Routes>
+		</UserContext.Provider>
+		{/* <Footer/> */}
     </div>
     );
 }

frontend/src/GoogleLoginButton.js

@@ -2,6 +2,8 @@ import { GoogleLogin } from "@react-oauth/google";
 import { GoogleOAuthProvider } from "@react-oauth/google";
 import { useNavigate, Navigate } from "react-router-dom";
 import { useCookies } from 'react-cookie'
+import React, { useEffect, useState, useContext} from 'react';
+import { UserContext } from './Usercontext.js';
 
 // 안써도 자동으로 한국 시간을 불러온다. 명확하게 하기 위해 import
 import moment from 'moment';
@@ -11,37 +13,24 @@ import base64 from 'base-64';
 import axios from 'axios';
 
 axios.defaults.withCredentials = true;
-/*
-
-*/
-
 
 
 const GoogleLoginButton = () => {
+	
+  const setUserName = useContext(UserContext);
+
   const [cookies, setCookie, removeCookie] = useCookies();
   const clientId = '716858812522-rb0pfisq317unkh4so5hvbu16p19kqp8.apps.googleusercontent.com'
   const navigate = useNavigate();
+  
   const goMain = () => {
-    navigate("/main");
+    navigate("/");
   }
   return (
     <>
       <GoogleOAuthProvider clientId={clientId}>
         <GoogleLogin
           onSuccess={(res) => {
-            /* 발급받은 토큰은 . 을 기준으로 3 개로 나뉜다.
-            aaaa.bbbb.cccc
-          	
-            [base64]aaaa: 헤더
-            [base64]bbbb: 페이로드 (실질적인 데이터)
-            [RS256]cccc: 서명
-          	
-            RS256 : 암호화 알고리즘, JWT 서명할 때 사용한다고 함
-            */
-			
-			// 쿠키 테스트 1분 뒤 만료
-			const expires =  moment().add('1','m').toDate()
-			setCookie('cookieTest','hello',{expires})
 			
             let datas = res.credential.split('.')
             const obj = JSON.parse(b64DecodeUnicode(datas[1]));
@@ -49,11 +38,13 @@ const GoogleLoginButton = () => {
 			// 토큰을 보내 로그인 로직 처리
 			// 로그인이 정상적으로 되었다면 쿠키를 등록
 
-            let response = requestLogin(obj);
-			console.log(cookies.jwt)
-            if (response) {
-              goMain();
-            }
+            let response = requestLogin(obj).then(
+				(val) => {
+					setUserName(val)
+					goMain();
+				}
+			);
+			
           }}
           onFailure={(err) => {
             console.log("Login Failed");
@@ -79,7 +70,6 @@ async function requestLogin(payloadObj) {
     method: 'post', // 통신할 방식
     data: payloadObj
   });
-  console.log(response)
   if (response.status === 200) {
     return response.data;
   }

frontend/src/Header.js

 import {Link} from "react-router-dom";
 import logo from './logo.png';
 import './Header.css';
+import cookie from 'react-cookies';
+import React, { useEffect, useState, useContext} from 'react';
+import { useNavigate, Navigate } from "react-router-dom";
+import { UserContext } from './Usercontext.js';
+import axios from 'axios';
+axios.defaults.withCredentials = true;
 
-function Header(){
+
+function Welcome(props){
+	
+	return (
+	<p>
+		{props.name?`${props.name}님, 환영합니다`:'로그인하세요.'}<br/>
+	</p>
+	)
+}
+
+function ButtonLink({link, onclick, children}){
+	
+	return (
+		<botton onClick = {()=>{
+			onclick(link)}}>
+			{children}
+		</botton>
+	)
+}
+
+function Header({user}){
+	//console.log(cookie.load('name'))
+	const [currentSession, setCurrentSession] = useState(false)
+	
+	const setUserName = useContext(UserContext);
+	const navigate = useNavigate();
+	function checkSession_And_Navigate(link){
+		if (cookie.load('name')) {
+			navigate(link);
+			setCurrentSession(true)
+		}
+		else {
+			setUserName(null)
+			if (currentSession){
+				alert('세션이 만료되었습니다. 로그인 후 이용해 주세요.')
+			}
+			else {
+				alert('로그인 후 이용해 주세요.')
+			}
+			
+			navigate("/login");
+			setCurrentSession(false)
+		}
+	}
+	
+	function dont_CheckSession_And_Navigate(link){
+		if (cookie.load('name')) {
+			setCurrentSession(true)
+		}
+		else {
+			setUserName(null)
+			if (currentSession){
+				alert('세션이 만료되었습니다. 자동으로 로그아웃됩니다.')
+			}
+			setCurrentSession(false)
+		}
+		navigate(link);
+	}
+
+	function logOut(){
+		let response = requestLogout();
+		if (response){
+			setUserName(null)
+			alert('로그아웃되었습니다. 메인 화면으로 돌아갑니다..')
+			setCurrentSession(false)
+			navigate('/');		
+		}	
+	}
+	
     return(
         <div className="header">
-            <Link to='/'><img className="logo_image" alt="logo" src={logo}/></Link>
-            <ul className="menu_list">
-                <li><Link to="/">Home</Link></li>
-                <li><Link to="/search">검색</Link></li>
-                <li><Link to="/postwrite">포스트 작성</Link></li>
-                <li><Link to="/login">로그인</Link></li> {/*로그인 여부 로직 구현 필요*/}
-                {/* { Object.keys(user).length != 0 ? 
-                    <li><Link to={`/profile/${getUserId()}`}>profile</Link>/<span onClick={logout}>logout</span></li> :
-                    <li><Link to="/login">login</Link></li>
-                }   */}
-            </ul>
+			<ButtonLink link='/' onclick={dont_CheckSession_And_Navigate}>
+				<img className="logo_image" alt="logo" src={logo}/>
+			</ButtonLink>
+
+			<ul>
+
+				<Welcome name={user}></Welcome>
+
+				<ul className="menu_list">
+					<li><ButtonLink link='/' onclick={dont_CheckSession_And_Navigate}>Home</ButtonLink></li>
+					<li><ButtonLink link='/search' onclick={checkSession_And_Navigate}>검색</ButtonLink></li>
+					<li><ButtonLink link='/postwrite' onclick={checkSession_And_Navigate}>포스트 작성</ButtonLink></li>
+					<li><ButtonLink link='/login' onclick={user?logOut:dont_CheckSession_And_Navigate}>{user?'로그아웃':'로그인'}</ButtonLink></li> {/*로그인 여부 로직 구현 필요*/}
+					{/* { Object.keys(user).length != 0 ? 
+						<li><Link to={`/profile/${getUserId()}`}>profile</Link>/<span onClick={logout}>logout</span></li> :
+						<li><Link to="/login">login</Link></li>
+					}   */}
+				</ul>
+			</ul>
         </div>
     );
 }
 
+async function requestLogout() {
+  const response = await axios({
+    url: 'http://localhost:8080/logout', // 통신할 웹문서
+    method: 'get', // 통신할 방식
+  });
+  if (response.status === 200) {
+    return response.data;
+  }
+  else {
+    return null;
+  }
+}
+
 export default Header;

frontend/src/Login.js

+import { useNavigate } from 'react-router-dom';
+import GoogleLoginButton from "./GoogleLoginButton.js";
+
+function Button({history, children}){
+  const navigate = useNavigate();
+  return(
+    <button onClick={() => {navigate('/search');}}>
+      {children}
+    </button>
+  );
+}
+
+function Login() {
+  return(
+    <div className="App">
+      <h1>로그인 '해줘'</h1>
+	  <GoogleLoginButton></GoogleLoginButton>
+    </div>)
+  ;
+}
+
+export default Login;
\ No newline at end of file

frontend/src/Main.js

 import { useNavigate } from 'react-router-dom';
+import cookie from 'react-cookies';
+import React, { useState, useEffect, useContext } from 'react';
 
 function Button({history, children}){
   const navigate = useNavigate();
@@ -10,6 +12,10 @@ function Button({history, children}){
 }
 
 function Main() {
+
+  useEffect(() => {
+    // 컴포넌트가 불러와지면 실행이 되는군.
+  });
   return(
     <div className="App">
       <h1>메인 페이지 입니다.</h1>

frontend/src/Usercontext.js

+import { createContext } from 'react';
+
+export const UserContext = createContext(null);
\ No newline at end of file

frontend/src/index.js

@@ -8,7 +8,7 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App/>
+		<App/>
     </BrowserRouter>
   </React.StrictMode>
 );