고병후

Merge branch 'master' of http://khuhub.khu.ac.kr/2019102198/Tunnel into authorize

1 -import {BrowserRouter as Redirect, Router, Route, Routes} from "react-router-dom"; 1 +import React from "react";
2 +import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
2 import MainPage from "./component/views/MainPage/MainPage"; 3 import MainPage from "./component/views/MainPage/MainPage";
3 import LoginPage from "./component/views/LoginPage/LoginPage"; 4 import LoginPage from "./component/views/LoginPage/LoginPage";
4 import RegisterPage from "./component/views/RegisterPage/RegisterPage"; 5 import RegisterPage from "./component/views/RegisterPage/RegisterPage";
5 import "./static/fonts/font.css"; 6 import "./static/fonts/font.css";
7 +import Auth from './hoc/auth';
6 8
7 function App () { 9 function App () {
8 - let isAuthorized = sessionStorage.getItem("isAuthorized"); //
9 return ( 10 return (
10 <Router> 11 <Router>
11 <div> 12 <div>
12 - {!isAuthorized ? <Redirect to="/login" /> : <Redirect to="/main" />} 13 + <Routes>
13 - <Routes> 14 + <Route exact path="/main" element={Auth(MainPage, true)} />
14 - <Route exact path = "/login" element={<LoginPage/>}/> 15 + <Route exact path="/login" element={Auth(LoginPage , false)}>
15 - <Route exact path = "/main" element={<MainPage/>}/> 16 + </Route>
16 - <Route exact path = "/register" element={<RegisterPage/>}/> 17 + <Route exact path="/register" element={Auth(RegisterPage , false)}>
17 - </Routes> 18 + </Route>
19 + </Routes>
18 </div> 20 </div>
19 </Router> 21 </Router>
20 ); 22 );
......
...@@ -4,12 +4,10 @@ import Axios from 'axios' ...@@ -4,12 +4,10 @@ import Axios from 'axios'
4 import { Icon, Input } from "semantic-ui-react" 4 import { Icon, Input } from "semantic-ui-react"
5 import { useNavigate } from "react-router-dom"; 5 import { useNavigate } from "react-router-dom";
6 6
7 -function LoginPage(props) { 7 +function LoginPage() {
8 - const navigate = useNavigate(); 8 + let navigate = useNavigate();
9 -
10 const [Id, setId] = useState(""); 9 const [Id, setId] = useState("");
11 const [Password, setPassword] = useState(""); 10 const [Password, setPassword] = useState("");
12 -
13 const onIdHandler = (event) => { 11 const onIdHandler = (event) => {
14 setId(event.currentTarget.value); 12 setId(event.currentTarget.value);
15 }; 13 };
...@@ -75,5 +73,4 @@ function LoginPage(props) { ...@@ -75,5 +73,4 @@ function LoginPage(props) {
75 </div> 73 </div>
76 ); 74 );
77 } 75 }
78 -
79 export default LoginPage; 76 export default LoginPage;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,9 +4,13 @@ import { useNavigate } from "react-router-dom"; ...@@ -4,9 +4,13 @@ import { useNavigate } from "react-router-dom";
4 import { CKEditor } from '@ckeditor/ckeditor5-react'; 4 import { CKEditor } from '@ckeditor/ckeditor5-react';
5 import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; 5 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
6 6
7 -function MainPage() { 7 +function MainPage(props) {
8 + const isLogin = props.isLogin;
8 const navigate = useNavigate(); 9 const navigate = useNavigate();
9 - const goToLogin = () =>{ 10 + const onLogout = () => {
11 + // sessionStorage 에 user_id 로 저장되어있는 아이템을 삭제한다.
12 + sessionStorage.removeItem('isAuthorized')
13 + // App 으로 이동(새로고침)
10 navigate('/login'); 14 navigate('/login');
11 } 15 }
12 return ( 16 return (
...@@ -16,7 +20,7 @@ function MainPage() { ...@@ -16,7 +20,7 @@ function MainPage() {
16 <h1>Tunnel</h1> 20 <h1>Tunnel</h1>
17 </div> 21 </div>
18 <div className="None-title"> 22 <div className="None-title">
19 - <Button className="ui right floated button" onClick={()=>goToLogin()}> 23 + <Button className="ui right floated button" onClick={()=>onLogout()}>
20 Logout 24 Logout
21 </Button> 25 </Button>
22 </div> 26 </div>
......
...@@ -97,8 +97,7 @@ function RegisterPage(props) { ...@@ -97,8 +97,7 @@ function RegisterPage(props) {
97 <div className="btn-area" > 97 <div className="btn-area" >
98 <Button className='register-btn' 98 <Button className='register-btn'
99 content='Sign up' 99 content='Sign up'
100 - icon='signup' 100 + icon='signup'/>
101 - size='small'/>
102 </div> 101 </div>
103 </form> 102 </form>
104 </div> 103 </div>
......
...@@ -31,7 +31,6 @@ ...@@ -31,7 +31,6 @@
31 margin-top: 20px; 31 margin-top: 20px;
32 font-weight: bold; 32 font-weight: bold;
33 font-size: medium; 33 font-size: medium;
34 -
35 input { 34 input {
36 width: 75%; 35 width: 75%;
37 padding: 15px .8em .8em; 36 padding: 15px .8em .8em;
...@@ -42,7 +41,6 @@ ...@@ -42,7 +41,6 @@
42 color: white; 41 color: white;
43 outline: none; 42 outline: none;
44 } 43 }
45 -
46 label { 44 label {
47 position: absolute; 45 position: absolute;
48 left: 10px; 46 left: 10px;
...@@ -55,7 +53,6 @@ ...@@ -55,7 +53,6 @@
55 display: flex; 53 display: flex;
56 justify-content: space-evenly; 54 justify-content: space-evenly;
57 margin-top: 30px; 55 margin-top: 30px;
58 -
59 .login-btn { 56 .login-btn {
60 width: 150px; 57 width: 150px;
61 height: 50px; 58 height: 50px;
...@@ -79,5 +76,4 @@ ...@@ -79,5 +76,4 @@
79 cursor: pointer; 76 cursor: pointer;
80 } 77 }
81 } 78 }
82 -} 79 +}
83 -
...\ No newline at end of file ...\ No newline at end of file
......
1 +import React, {useEffect} from 'react';
2 +import Axios from 'axios';
3 +import { useNavigate } from 'react-router-dom';
4 +export default function (SpecificComponent) {
5 + // option
6 + // null -> 아무나 출입, true -> 로그인한 유저만 출입, false -> 로그인한 유저는 출입 불가능
7 + function AuthenticationCheck() {
8 + let navigate = useNavigate();
9 + useEffect(() => {
10 + Axios.get('/api/auth')
11 + .then((res)=>{
12 + if(res.status === 200){
13 + navigate('/main')
14 + }
15 + }).catch((error) => {
16 + console.log(error.response);
17 + alert('로그인이 필요합니다!');
18 + navigate('/login');
19 + })
20 + }, [])
21 +
22 + return (
23 + <SpecificComponent/>
24 + )
25 + }
26 + return <AuthenticationCheck />
27 +}
...\ No newline at end of file ...\ No newline at end of file