정의왕

Check isAuth

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