Commit 90beadc9 authored by CHAERIN KIM's avatar CHAERIN KIM
Browse files

logout 새로고침

parent 0ffaebc2
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>
)
......
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
......@@ -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>
......
......@@ -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>
......
......@@ -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>
)}
......
......@@ -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} />
......
......@@ -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,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment