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 { AuthContext } from './auth/auth-context';
import authHelpers from './auth/auth-helpers';
import MainRouter from './MainRouter';
function App() {
const [authState, setAuthState] = useState(authHelpers.isAuthenticated())
return (
<AuthContext.Provider value={{authState, setAuthState}}>
<BrowserRouter>
<MainRouter/>
<MainRouter />
</BrowserRouter>
</AuthContext.Provider>
);
}
......
src/client/src/MainRouter.jsx
View file @ 70ab25bf
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 Home from "./core/Home";
import Menu from "./core/Menu";
......@@ -9,14 +9,18 @@ function MainRouter() {
<div>
<Menu />
<Switch>
<Route exact path='/'>
<Home/>
<Route exact path="/">
{/* {console.log('Home 안에서 ...')} */}
<Home />
</Route>
<Route path='/signin'>
<Signin/>
<Route path="/signin">
<Signin />
</Route>
</Switch>
</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 Form from "react-bootstrap/Form";
import Container from "react-bootstrap/Container";
import { signin } from "./api-auth";
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() {
const authContext = useContext(AuthContext)
// const history = useHistory()
const [values, setValues] = useState({
email: "",
password: "",
......@@ -25,13 +28,14 @@ function Signin() {
password: values.password || undefined,
};
// console.log('user in Signin.jsx:', user)
console.log('authContext in Signin.jsx:', authContext)
signin(user).then((data) => {
if (data.error) {
setValues({ ...values, error: data.error });
} else {
auth.authenticate(data, () => {
authContext.setAuthState(auth.isAuthenticated())
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) => {
if (typeof window !== 'undefined') {
sessionStorage.setItem('jwt', JSON.stringify(jwt))
......@@ -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 {
authenticate,
isAuthenticated,
clearJwt,
}
\ No newline at end of file
src/client/src/core/Home.jsx
View file @ 70ab25bf
......@@ -4,6 +4,106 @@ function Home() {
return (
<div>
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>
)
}
......
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 Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
......@@ -6,15 +6,21 @@ import Form from "react-bootstrap/Form";
import FormControl from "react-bootstrap/FormControl";
import Button from "react-bootstrap/Button";
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";
function Menu() {
const authContext = useContext(AuthContext);
const history = useHistory();
console.log("Menu.jsx", history);
console.log("authContext in Menu.jsx:", authContext);
return (
// <div className='row'>
<Navbar bg="dark" variant="dark" expand="sm">
<Navbar.Brand href="#home">
<Navbar sticky="top" bg="dark" variant="dark" expand="sm">
<Navbar.Brand href="/">
<i className="fas fa-child fa-2x"></i>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
......@@ -34,8 +40,17 @@ function Menu() {
</NavDropdown.Item>
</NavDropdown>
</Nav>
{auth.isAuthenticated() ? (
<Button>Sign out</Button>
{authContext.authState ? (
<Button
onClick={() =>
auth.clearJwt(() => {
history.push("/");
authContext.setAuthState(false);
})
}
>
Sign out
</Button>
) : (
<Link to="/signin">
<Button>Sign in</Button>
......@@ -43,71 +58,6 @@ function Menu() {
)}
</Navbar.Collapse>
</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';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
import '@fortawesome/fontawesome-free/css/all.css'
// import MainRouter from './MainRouter';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
// <React.StrictMode>
<App />,
// </React.StrictMode>,
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