context, 로그인, 로그아웃 적용

client/src/App.js

@@ -10,34 +10,37 @@ import StudyPlanPage from "./pages/StudyPlanPage";
 import StudyPlanEditPage from "./pages/StudyPlanEditPage";
 import SubjectEditPage from "./pages/SubjectEditPage";
 import AdminPage from "./pages/Admin/AdminPage";
+import { AuthProvider } from "./utils/context.js";
 import PrivateRoute from "./components/PrivateRoute";
 import ErrorPage from "./pages/ErrorPage";
 
 function App() {
   return (
-    <Router basename={process.env.PUBLIC_URL}>
-      <div id="box" className="container position-relative vh-100 mx-sm-auto">
-        <Switch>
-          <Route exact path="/" component={LoginPage} />
-          <Route path="/login" component={LoginPage} />
-          <Route path="/signup" component={SignupPage} />
-          <Route path="/home" component={HomePage} />
-          <Route path="/schedule/edit" component={ScheduleEditPage} />
-          <Route path="/schedule/:date" component={SchedulePage} />
-          <Route path="/todo/:date" component={ToDoPage} />
-          <Route path="/studyplan/edit" component={StudyPlanEditPage} />
-          <Route path="/studyplan/:" component={StudyPlanPage} />
-          <Route path="/studyplan" component={StudyPlanListPage} />
-          <Route path="/subject/edit/:subjectId" component={SubjectEditPage} />
-          <Route path="/subject/edit" component={SubjectEditPage} />
-          <Route path="/admin/edit" component={ScheduleEditPage} />
-          <Route path="/admin" component={AdminPage} />
-          {/* <PrivateRoute path="/admin" component={AdminPage} role="admin" /> */}
+    <AuthProvider >
+      <Router basename={process.env.PUBLIC_URL}>
+        <div id="box" className="container position-relative vh-100 mx-sm-auto">
+          <Switch>
+            <Route exact path="/" component={LoginPage} />
+            <Route path="/login" component={LoginPage} />
+            <Route path="/signup" component={SignupPage} />
+            <Route path="/home" component={HomePage} />
+            <Route path="/schedule/edit" component={ScheduleEditPage} />
+            <Route path="/schedule/:date" component={SchedulePage} />
+            <Route path="/todo/:date" component={ToDoPage} />
+            <Route path="/studyplan/edit" component={StudyPlanEditPage} />
+            <Route path="/studyplan/:" component={StudyPlanPage} />
+            <Route path="/studyplan" component={StudyPlanListPage} />
+            <Route path="/subject/edit/:subjectId" component={SubjectEditPage} />
+            <Route path="/subject/edit" component={SubjectEditPage} />
+            <Route path="/admin/edit" component={ScheduleEditPage} />
+            <Route path="/admin" component={AdminPage} />
+            {/* <PrivateRoute path="/admin" component={AdminPage} role="admin" /> */}
 
-          <Route component={ErrorPage} />
-        </Switch>
-      </div>
-    </Router>
+            <Route component={ErrorPage} />
+          </Switch>
+        </div>
+      </Router>
+    </AuthProvider>
   );
 }
 

client/src/apis/auth.api.js

 import axios from "axios";
 import baseUrl from "../utils/baseUrl.js";
 
+const getUser = async () => {
+  const url = `${baseUrl}/api/auth/user`
+  const { data } = await axios.get(url)
+  return data
+}
+
 const signup = async (user) => {
   const url = `${baseUrl}/api/auth/signup`;
-  const { data, status } = await axios.post(url, user);
-  return { data, status }
+  const { data } = await axios.post(url, user);
+  return data
 }
 
 const login = async (user) => {
   const url = `${baseUrl}/api/auth/login`;
-  const { data, status } = await axios.post(url, user);
-  return { data, status }
+  const { data } = await axios.post(url, user);
+  return data
+}
+
+const logout = async () => {
+  const url = `${baseUrl}/api/auth/logout`;
+  const { data } = await axios.get(url);
+  return data
 }
 
 const authApi = {
+  getUser,
   signup,
-  login
+  login,
+  logout
 };
 
 export default authApi
\ No newline at end of file

client/src/components/Form/LoginForm.js

 import { useState } from 'react';
 import { Redirect, Link } from "react-router-dom";
 import { Formik } from 'formik';
+import { useAuth } from "../../utils/context.js";
 import * as Yup from 'yup';
-import authApi from '../../apis/auth.api';
 import catchErrors from "../../utils/catchErrors.js";
 import styles from "./form.module.scss";
 
 const LoginForm = () => {
+  const { login } = useAuth();
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState("");
 
@@ -28,9 +29,10 @@ const LoginForm = () => {
         })}
         onSubmit={async (values, { setSubmitting, resetForm }) => {
           try {
+            console.log('login values', values)
             setError("")
-            const result = await authApi.login(values)
-            if (result.status === 201) {
+            const result = await login(values)
+            if (result) {
               setSuccess(true)
             }
           } catch (error) {

client/src/components/Menu/Menu.js

 import { Link, Redirect } from "react-router-dom";
+import { useAuth } from "../../utils/context.js";
 import moment from "moment";
 import styles from "./menu.module.scss";
 
 const Menu = () => {
+    const { logout } = useAuth();
     return (
         <>
             <button className="btn btn-crimson shadow-none mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#menuContent" aria-controls="menuContent" aria-expanded="false" aria-label="menu">
@@ -39,7 +41,7 @@ const Menu = () => {
                             <Link className="text-dark text-decoration-none" to={`/schedule/${moment().format("YYYY-MM-DD")}`}><i className="bi bi-check"></i>일정</Link>
                             <Link className="text-dark text-decoration-none" to="/studyplan"><i className="bi bi-check"></i>학업별 계획</Link>
                         </div>
-                        <p className={`position-absolute bottom-0 text-dark ${styles.logout}`}>로그아웃</p>
+                        <p className={`position-absolute bottom-0 text-dark ${styles.logout}`} onClick={logout}>로그아웃</p>
                     </div>
                 </div>
             </div>

client/src/components/PrivateRoute.js

 import { Redirect, Route } from "react-router-dom";
-// import { useAuth } from "../context/auth_context";
+import { useAuth } from "../utils/context.js"
 import ErrorPage from "../pages/ErrorPage";
 
 const PrivateRoute = ({ component: Component, ...rest }) => {
-    //   const { user } = useAuth();
-    //   return (
+    const { user } = useAuth();
+    // return (
     //     <Route
-    //       {...rest}
-    //       render={(props) => {
-    //         if (user) {
-    //           if (rest.role) {
-    //             if (rest.role === user.role) {
-    //               return <Component {...props} />;
+    //         {...rest}
+    //         render={(props) => {
+    //             if (user) {
+    //                 if (rest.role) {
+    //                     if (rest.role === user.role) {
+    //                         return <Component {...props} />;
+    //                     } else {
+    //                         return <ErrorPage />
+    //                     }
+    //                 } else {
+    //                     return <Component {...props} />
+    //                 }
     //             } else {
-    //               return <ErrorPage />
+    //                 return <Redirect to="/login" />;
     //             }
-    //           } else {
-    //             return <Component {...props} />
-    //           }
-    //         } else {
-    //           return <Redirect to="/login" />;
-    //         }
-    //       }}
+    //         }}
     //     />
-    //   );
+    // );
     return (
         <Route {...rest} render={(props) => <Component {...props} />} />
     )

client/src/utils/context.js

+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { Redirect } from 'react-router-dom';
+import authApi from "../apis/auth.api";
+import catchErrors from './catchErrors';
+
+const AuthContext = createContext({
+  error: "",
+  user: { id: "", role: "user", name: "" },
+  setUser: () => { },
+  login: () => Promise.resolve(false),
+  logout: () => { },
+  catchErrorAuth: (error, displayError) => { },
+});
+
+const AuthProvider = ({ children }) => {
+  const [error, setError] = useState("");
+  const [user, setUser] = useState({ id: "", role: "user", name: "" });
+  const getUser = async () => {
+    const { id, role, userName } = await authApi.getUser();
+    const user = { id: id, role: role, name: userName };
+    setUser(user);
+  }
+  useEffect(() => {
+    getUser();
+  }, []);
+
+  const login = useCallback(async (data) => {
+    try {
+      setError("");
+      const user = await authApi.login(data);
+      console.log('user in context', user)
+      setUser(user);
+      console.log('setUser 결과', user)
+      return true;
+    } catch (error) {
+      catchErrors(error, setError);
+      return false;
+    }
+  }, []);
+
+  const logout = useCallback(async () => {
+    try {
+      setError("");
+      const user = await authApi.logout();
+      setUser(user);
+      alert("로그아웃 되었습니다.");
+    } catch (error) {
+      catchErrors(error, setError);
+    }
+  }, []);
+
+  const catchErrorAuth = useCallback(async (error, displayError) => {
+    let errMsg;
+    if (error.response) {
+      if (typeof error.response.data === "string") {
+        errMsg = error.response.data;
+        console.log('Error response:', errMsg);
+      } else {
+        const { data } = error.response;
+        if (data.redirectUrl) {
+          errMsg = data.message;
+          console.log('Error response with redirected message:', errMsg);
+          return await logout();
+        }
+      }
+    } else if (error.request) {
+      errMsg = error.request;
+      console.log('Error request:', errMsg);
+    } else {
+      errMsg = error.message;
+      console.log("Error message:", errMsg)
+    }
+    displayError(errMsg);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ error, user, setUser, login, logout, catchErrorAuth }} >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+const useAuth = () => useContext(AuthContext);
+
+export { AuthProvider, useAuth };
+

server/controllers/user.controller.js

@@ -2,6 +2,22 @@ import jwt from "jsonwebtoken";
 import { User } from '../db/index.js';
 import config from "../config/app.config.js";
 
+const getUser = async (req, res) => {
+  try {
+    if (req.cookies.todayku) {
+      const token = req.cookies.todayku;
+      const { id, role, name } = jwt.verify(token, config.jwtSecret);
+      res.json({ id, role, name });
+    } else {
+      res.json({ id: "", role: "user", name: "" });
+    }
+  } catch (error) {
+    console.error(error);
+    return res.status(500).send("유저를 가져오지 못했습니다.");
+  }
+}
+
+
 const signup = async (req, res) => {
   console.log('server/signup req.body', req.body)
   const { userId, password, userName, userStudNum } = req.body;
@@ -15,7 +31,7 @@ const signup = async (req, res) => {
       password: password,
       userName: userName,
       studNum: userStudNum,
-      role:"user"
+      role: "user"
     });
     res.status(201).json("success")
   } catch (error) {
@@ -38,8 +54,9 @@ const login = async (req, res) => {
 
       const signData = {
         id: user.userID,
-        name: user.userName
-    };
+        role: "user",
+        name: user.userName,
+      };
 
       const token = jwt.sign(signData, config.jwtSecret, {
         expiresIn: config.jwtExpires,
@@ -52,8 +69,8 @@ const login = async (req, res) => {
         secure: config.env === "production",
       });
 
-      res.status(201).json(user)
-    } else { 
+      res.status(201).json(signData)
+    } else {
       res.status(401).send("비밀번호가 일치하지 않습니다.")
     }
 
@@ -63,7 +80,23 @@ const login = async (req, res) => {
   }
 }
 
+const logout = async (req, res) => {
+  try {
+    res.clearCookie(config.cookieName);
+    res.json({
+      id:"",
+      role:"user",
+      name:""
+    })
+  } catch (error) {
+    console.log(error);
+    return res.status(500).send("로그아웃 에러발생")
+  }
+}
+
 export default {
+  getUser,
   signup,
-  login
+  login,
+  logout
 }
\ No newline at end of file

server/routes/user.route.js

@@ -11,4 +11,7 @@ router
   .route("/login")
   .post(userCtrl.login)
 
+router
+  .route("/logout")
+  .get(userCtrl.logout )
 export default router;
\ No newline at end of file