logout 새로고침

server/client/src/Components/Menu.js

 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import styled from 'styled-components';
 
 const Nav = styled.nav`
@@ -7,13 +7,23 @@ const Nav = styled.nav`
 `
 
 function Menu() {
+    const [state, setState] = useState()
+    
+    if (state) return <Redirect to="/" />;
+
+    function logout() {
+        localStorage.removeItem('token');
+        alert("로그아웃 되었습니다.");
+        setState(true);
+    }
+
     return (
         <Nav className="navbar sticky-top navbar-expand-md">
             <Link to="/home" className="navbar-brand">대관 서비스</Link>
             <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar">
                 <span className="navbar-toggler-icon"></span>
             </button>
-            <div className="collapse navbar-collapse" id="collapsibleNavbar">
+            <div className="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
                 <ul className="navbar-nav">
                     <li className="nav-item">
                         <Link to="/home" className="nav-link">대관 현황</Link>
@@ -27,8 +37,11 @@ function Menu() {
                     <li className="nav-item">
                         <Link to="/notice" className="nav-link">공지사항</Link>
                     </li>
-
                 </ul>
+                <div>
+                    <button onClick={logout} type="button">로그아웃</button>
+                    <button><Link to="/signup">회원가입</Link></button>
+                </div>
             </div>
         </Nav>
     )

server/client/src/Components/PrivateRoute.js

+import React from 'react';
+import { Redirect, Route } from "react-router-dom";
+
+export const PrivateRoute = ({ component: Component, ...rest }) => (
+  <Route
+    {...rest}
+    render={props =>
+      (localStorage.getItem("token") !==null) ? (
+        <Component {...props} />
+      ) : (
+          <Redirect to={{ 
+            pathname: "/login",
+            state: {match: props.location}
+           }} />
+        )
+    }
+  />
+)
\ No newline at end of file

server/client/src/Pages/HomePage.js

@@ -8,7 +8,7 @@ function Home() {
             <Menu />
             <div className="container">
                 home
-                <button><Link to="/">로그인</Link></button>
+                <button><Link to="/login">로그인</Link></button>
                 <button><Link to="/signup">회원가입</Link></button>
             </div>
         </div>

server/client/src/Pages/LoginPage.js

@@ -32,7 +32,7 @@ function Login() {
                         initialValues={{ id: '', password: '' }}
                         validationSchema={Yup.object({
                             id: Yup.string()
-                        .required('아이디를 입력해주세요.'),
+                        .required('학번을 입력해주세요.'),
                             password: Yup.string()
                                 .required('비밀번호를 입력해주세요.')
                                 .min(8, '8자 이상 입력해주세요.'),
@@ -71,10 +71,10 @@ function Login() {
                                         <div className="form-group mb-4">
                                             <input
                                                 className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")}
-                                                type="text"
+                                                type="number"
                                                 name="id"
                                                 {...getFieldProps('id')}
-                                                placeholder="Input id"
+                                                placeholder="Input Student Id"
                                             />
                                             {touched.id && errors.id ? (
                                                 <div className="invalid-feedback text-left">{errors.id}</div>
@@ -96,6 +96,7 @@ function Login() {
                                             Login
                                         </button>
                                         <button><Link to="/home">홈</Link></button>
+                                        <div></div>
                                         <Link to="/signup">비밀번호를 잊으셨나요?</Link>
                                         <div></div>
                                         <Link to="/signup">회원이 아니신가요?</Link>

server/client/src/Pages/SignupPage.js

@@ -20,7 +20,7 @@ function Signup() {
                     name: Yup.string()
                         .required('이름을 입력해주세요.'),
                     id: Yup.string()
-                        .required('아이디를 입력해주세요.'),
+                        .required('학번을 입력해주세요.'),
                     password: Yup.string()
                         .required('비밀번호를 입력해주세요.')
                         .min(8, '8자 이상 입력해주세요.'),
@@ -72,10 +72,10 @@ function Signup() {
                                 <div className="form-group mb-4">
                                     <input
                                         className={(touched.id && errors.id ? 'form-control is-invalid' : "form-control")}
-                                        type="text"
+                                        type="number"
                                         name="id"
                                         {...getFieldProps('id')}
-                                        placeholder="Input id"
+                                        placeholder="Input Student Id"
                                     />
                                     {touched.id && errors.id ? (
                                         <div className="invalid-feedback text-left">{errors.id}</div>
@@ -108,8 +108,8 @@ function Signup() {
                                 <button type="submit" className="btn btn-dark" disabled={isSubmitting}>
                                     Sign Up
                                 </button>
-                                <button><Link to="/">로그인</Link></button>
-                                <button><Link to="/home">홈</Link></button>
+                                <button><Link to="/login">로그인</Link></button>
+                                <button><Link to="/">홈</Link></button>
                             </form>
                         </div>
                     )}

server/client/src/index.js

@@ -4,7 +4,7 @@ import * as serviceWorker from './serviceWorker';
 import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.css';
 import axios from 'axios';
-//import { PrivateRoute } from './PrivateRoute';
+import { PrivateRoute } from './Components/PrivateRoute';
 
 import Login from './Pages/LoginPage';
 import Home from './Pages/HomePage';
@@ -20,7 +20,8 @@ axios.defaults.validateStatus = function (status) {
 ReactDOM.render(
 <Router>
     <Switch>
-      <Route exact path="/" component={Login} />
+      <PrivateRoute exact path="/" component={Home} />
+      <Route path="/login" component={Login} />
       <Route path="/home" component={Home} />
       <Route path="/signup" component={Signup} />
       <Route path="/apply" component={Apply} />

server/routes/login.js

@@ -36,7 +36,7 @@ router.post('/', function (req, res, next) {
                 const token = jwt.sign({
                     id:users.id,
                 }, process.env.JWT_SECRET, {
-                    expiresIn: '10m', // 12시간
+                    expiresIn: '1m',
                 });
                 return res.status(201).json({
                     token,