Skip to content

GitLab

Commit 70ab25bf authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

useContext이용 로그인 구현

parent 35f88acc
Show whitespace changes
Inline Side-by-side
src/client/src/App.js
View file @ 70ab25bf
import React from 'react'; import React, {useState} from 'react';
import { BrowserRouter } from 'react-router-dom' import { BrowserRouter } from 'react-router-dom'
import { AuthContext } from './auth/auth-context';
import authHelpers from './auth/auth-helpers';
import MainRouter from './MainRouter'; import MainRouter from './MainRouter';
function App() { function App() {
const [authState, setAuthState] = useState(authHelpers.isAuthenticated())
return ( return (
<AuthContext.Provider value={{authState, setAuthState}}>
<BrowserRouter> <BrowserRouter>
<MainRouter/> <MainRouter />
</BrowserRouter> </BrowserRouter>
</AuthContext.Provider>
); );
} }
......
src/client/src/MainRouter.jsx
View file @ 70ab25bf
import React from "react"; import React from "react";
import { Route, Switch } from "react-router-dom"; import { BrowserRouter, Route, Switch } from "react-router-dom";
import Signin from "./auth/Signin"; import Signin from "./auth/Signin";
import Home from "./core/Home"; import Home from "./core/Home";
import Menu from "./core/Menu"; import Menu from "./core/Menu";
...@@ -9,14 +9,18 @@ function MainRouter() { ...@@ -9,14 +9,18 @@ function MainRouter() {
<div> <div>
<Menu /> <Menu />
<Switch> <Switch>
<Route exact path='/'> <Route exact path="/">
<Home/> {/* {console.log('Home 안에서 ...')} */}
<Home />
</Route> </Route>
<Route path='/signin'> <Route path="/signin">
<Signin/> <Signin />
</Route> </Route>
</Switch> </Switch>
</div> </div>
// <BrowserRouter>
// {console.log('BrowserRoter 안에서 ...')}
// </BrowserRouter>
); );
} }
......
src/client/src/auth/Signin.jsx
View file @ 70ab25bf
import React, { useState } from "react"; import React, { useState, useContext } from "react";
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form"; import Form from "react-bootstrap/Form";
import Container from "react-bootstrap/Container"; import Container from "react-bootstrap/Container";
import { signin } from "./api-auth"; import { signin } from "./api-auth";
import auth from "./auth-helpers"; import auth from "./auth-helpers";
import { Redirect } from "react-router-dom"; import { Redirect, useHistory } from "react-router-dom";
import { AuthContext } from "./auth-context";
function Signin() { function Signin() {
const authContext = useContext(AuthContext)
// const history = useHistory()
const [values, setValues] = useState({ const [values, setValues] = useState({
email: "", email: "",
password: "", password: "",
...@@ -25,13 +28,14 @@ function Signin() { ...@@ -25,13 +28,14 @@ function Signin() {
password: values.password || undefined, password: values.password || undefined,
}; };
// console.log('user in Signin.jsx:', user) console.log('authContext in Signin.jsx:', authContext)
signin(user).then((data) => { signin(user).then((data) => {
if (data.error) { if (data.error) {
setValues({ ...values, error: data.error }); setValues({ ...values, error: data.error });
} else { } else {
auth.authenticate(data, () => { auth.authenticate(data, () => {
authContext.setAuthState(auth.isAuthenticated())
setValues({ ...values, error: "", redirect: true }); setValues({ ...values, error: "", redirect: true });
}); });
} }
......
src/client/src/auth/auth-context.js 0 → 100644
View file @ 70ab25bf
import React from 'react'
export const AuthContext = React.createContext({
authState: false,
isAuthed: () => {}
})
\ No newline at end of file
src/client/src/auth/auth-helpers.js
View file @ 70ab25bf
import { signout } from "./api-auth"
const authenticate = (jwt, cb) => { const authenticate = (jwt, cb) => {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
sessionStorage.setItem('jwt', JSON.stringify(jwt)) sessionStorage.setItem('jwt', JSON.stringify(jwt))
...@@ -18,7 +20,18 @@ const isAuthenticated = () => { ...@@ -18,7 +20,18 @@ const isAuthenticated = () => {
} }
} }
const clearJwt = (cb) => {
if (typeof window !== 'undefined') {
sessionStorage.removeItem('jwt')
}
cb()
signout().then(data => {
document.cookie = "t=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"
})
}
export default { export default {
authenticate, authenticate,
isAuthenticated, isAuthenticated,
clearJwt,
} }
\ No newline at end of file
src/client/src/core/Home.jsx
View file @ 70ab25bf
...@@ -4,6 +4,106 @@ function Home() { ...@@ -4,6 +4,106 @@ function Home() {
return ( return (
<div> <div>
Home Home
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div> </div>
) )
} }
......
src/client/src/core/Menu.jsx
View file @ 70ab25bf
import React, { useState } from "react"; import React, { useState, useEffect, useContext } from "react";
import Navbar from "react-bootstrap/Navbar"; import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav"; import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown"; import NavDropdown from "react-bootstrap/NavDropdown";
...@@ -6,15 +6,21 @@ import Form from "react-bootstrap/Form"; ...@@ -6,15 +6,21 @@ import Form from "react-bootstrap/Form";
import FormControl from "react-bootstrap/FormControl"; import FormControl from "react-bootstrap/FormControl";
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
import auth from "../auth/auth-helpers"; import auth from "../auth/auth-helpers";
import { Link } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { AuthContext } from "../auth/auth-context";
// import { Link } from "react-router-dom"; // import { Link } from "react-router-dom";
function Menu() { function Menu() {
const authContext = useContext(AuthContext);
const history = useHistory();
console.log("Menu.jsx", history);
console.log("authContext in Menu.jsx:", authContext);
return ( return (
// <div className='row'> <Navbar sticky="top" bg="dark" variant="dark" expand="sm">
<Navbar bg="dark" variant="dark" expand="sm"> <Navbar.Brand href="/">
<Navbar.Brand href="#home">
<i className="fas fa-child fa-2x"></i> <i className="fas fa-child fa-2x"></i>
</Navbar.Brand> </Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Toggle aria-controls="basic-navbar-nav" />
...@@ -34,8 +40,17 @@ function Menu() { ...@@ -34,8 +40,17 @@ function Menu() {
</NavDropdown.Item> </NavDropdown.Item>
</NavDropdown> </NavDropdown>
</Nav> </Nav>
{auth.isAuthenticated() ? ( {authContext.authState ? (
<Button>Sign out</Button> <Button
onClick={() =>
auth.clearJwt(() => {
history.push("/");
authContext.setAuthState(false);
})
}
>
Sign out
</Button>
) : ( ) : (
<Link to="/signin"> <Link to="/signin">
<Button>Sign in</Button> <Button>Sign in</Button>
...@@ -43,71 +58,6 @@ function Menu() { ...@@ -43,71 +58,6 @@ function Menu() {
)} )}
</Navbar.Collapse> </Navbar.Collapse>
</Navbar> </Navbar>
// </div>
// <nav className="navbar navbar-expand-md navbar-light bg-dark">
// <Link to="" className="navbar-brand">
// <i className="fas fa-child fa-2x text-warning"></i>
// </Link>
// <ul className="navbar-nav">
// <li className="nav-item">
// <Link
// to=""
// className="nav-link text-light text-uppercase font-weight-bold px-3"
// >
// Home
// </Link>
// </li>
// <li className="nav-item">
// <Link
// to=""
// className="nav-link text-light text-uppercase font-weight-bold px-3"
// >
// Skills
// </Link>
// </li>
// <li className="nav-item dropdown" onClick={toggleOpen}>
// <Link
// to=""
// className="nav-link dropdown-toggle text-light text-uppercase font-weight-bold px-3"
// data-toggle="dropdown"
// >
// Projects
// </Link>
// <div className={menuClass}>
// <a href="#nogo" className="dropdown-item">
// Project 1
// </a>
// <a href="#" className="dropdown-item">
// Project 2
// </a>
// <a href="#" className="dropdown-item">
// Project 3
// </a>
// <a href="#" className="dropdown-item">
// Project 4
// </a>
// </div>
// </li>
// <li className="nav-item">
// <Link
// to=""
// className="nav-link text-light text-uppercase font-weight-bold px-3"
// >
// Teams
// </Link>
// </li>
// <li className="nav-item">
// <Link
// to=""
// className="nav-link text-light text-uppercase font-weight-bold px-3"
// >
// Contacts
// </Link>
// </li>
// </ul>
// </nav>
); );
} }
......
src/client/src/index.js
View file @ 70ab25bf
...@@ -4,11 +4,12 @@ import App from './App'; ...@@ -4,11 +4,12 @@ import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import '@fortawesome/fontawesome-free/css/all.css' import '@fortawesome/fontawesome-free/css/all.css'
// import MainRouter from './MainRouter';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> // <React.StrictMode>
<App /> <App />,
</React.StrictMode>, // </React.StrictMode>,
document.getElementById('root') document.getElementById('root')
); );
......
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