login logout

client/src/components/Header.js

 import { Link } from 'react-router-dom'
+import { handleLogout } from '../context/auth'
+
 const Header = () => {
   return (
     <div>
@@ -8,9 +10,9 @@ const Header = () => {
       >
         <div className="d-flex justify-content-end">
           <div>
-          <Link to="/user">
-            <img src="/BORA.png" style={{ width: '160px' }} />
-          </Link>
+            <Link to="/user">
+              <img src="/BORA.png" style={{ width: '160px' }} />
+            </Link>
           </div>
           <button
             type="button"
@@ -18,7 +20,7 @@ const Header = () => {
             data-bs-toggle="modal"
             data-bs-target="#logout"
             style={{
-              height: '30px', 
+              height: '30px',
               backgroundColor: '#E0CEE8',
               color: 'black',
               border: '1px #E0CEE8',
@@ -48,11 +50,16 @@ const Header = () => {
                 </div>
                 <div className="row mb-3">
                   <div className="d-flex justify-content-evenly">
-                    {/* <Link to="/user"> */}
-                    <button type="submit" className="col-2 p-1 btn btn-primary">
+                    <Link to="/" className="col-2 p-1 btn btn-primary">
+                    <button
+                      type="submit"
+                      className="btn btn-primary"
+                      onClick={() => handleLogout()}
+                      data-bs-dismiss="modal"
+                    >
                       예
                     </button>
-                    {/* </Link> */}
+                    </Link>
                     <button
                       type="submit"
                       className="col-2 p-1 btn btn-primary"

client/src/components/Login.js

 import { useEffect, useState } from 'react'
 import { Redirect } from 'react-router-dom'
 import userApi from '../apis/user.api'
-// import { useAuth } from '../context/auth_context'
 import catchErrors from "../context/catchError";
+import { handleLogin } from '../context/auth';
 const INIT_USER = {
   email: '',
   password: '',
@@ -33,6 +33,7 @@ const Login = () => {
       // setError("");
       const data = await userApi.login(user)
       console.log(data)
+      handleLogin(data.id)
       setSuccess(true)
     } catch (error) {
       console.log('error in login', error)

client/src/context/auth.js

+import axios from 'axios'
+
+export function handleLogin(userId) {
+  localStorage.setItem("user", userId)
+}
+
+export async function handleLogout() {
+  alert("로그아웃되었습니다.")
+  localStorage.removeItem('loginStatus')
+  await axios.get('/api/auth/logout') 
+  window.location.href='/'
+}
+
+export function isAuthenticated() {
+  const userId = localStorage.getItem('loginStatus')
+  if (userId) {
+      return userId
+  }else{
+      return false
+  }
+}

controllers/user.controller.js

@@ -73,7 +73,13 @@ const signup = async (req, res) => {
   }
 }
 
+const logout = (req, res) => {
+  res.clearCookie('token')
+  res.send('Logout Successful')
+}
+
 export default {
   login,
   signup,
+  logout,
 }