Commit 7a11adee authored by Spark's avatar Spark
Browse files

credential + proxy

parent f910891e
...@@ -57,5 +57,6 @@ ...@@ -57,5 +57,6 @@
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
} },
"proxy": "http://localhost:4500"
} }
import React from 'react'; import React from 'react';
import { Redirect, Route } from 'react-router-dom'; import { Redirect, Route } from 'react-router-dom';
import { isLogined } from '../utils/Auth'; import { isLogined } from './Auth';
function PrivateRoute({ path, children }) { function PrivateRoute({ path, children }) {
if (isLogined()) { if (isLogined()) {
......
...@@ -2,6 +2,7 @@ import React, { useState } from 'react'; ...@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import '../App.css' import '../App.css'
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap'; import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth'; import { LoginWithKakao } from '../utils/Oauth';
import axios from 'axios';
function LoginComp() { function LoginComp() {
...@@ -53,9 +54,17 @@ function LoginComp() { ...@@ -53,9 +54,17 @@ function LoginComp() {
function handleChange(event) { function handleChange(event) {
setEmailAddress(event.target.value) setEmailAddress(event.target.value)
console.log(emailAddress)
} }
console.log(emailAddress)
async function handleSubmit(event) {
event.preventDefault();
const res = await axios.post("/api/login", { email: emailAddress })
console.log(res)
}
return ( return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
<Card style={cardstyled}> <Card style={cardstyled}>
...@@ -89,7 +98,7 @@ function LoginComp() { ...@@ -89,7 +98,7 @@ function LoginComp() {
} }
</Row> </Row>
<Form style={inboxstyled}> <Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel <FloatingLabel
controlId="floatingInput" controlId="floatingInput"
label="Email" label="Email"
...@@ -97,7 +106,7 @@ function LoginComp() { ...@@ -97,7 +106,7 @@ function LoginComp() {
<Form.Control type="email" placeholder="Email" onChange={handleChange} /> <Form.Control type="email" placeholder="Email" onChange={handleChange} />
</FloatingLabel> </FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' onClick={CheckEmailSend}> <Button variant='light' className='mt-3' id='formbtn' onClick={CheckEmailSend} type='submit'>
LOGIN LOGIN
</Button> </Button>
</Form> </Form>
......
...@@ -5,6 +5,7 @@ import '../App.css' ...@@ -5,6 +5,7 @@ import '../App.css'
import UserInfo from './UserInfo'; import UserInfo from './UserInfo';
import { kakaoLogout } from '../utils/Oauth'; import { kakaoLogout } from '../utils/Oauth';
import axios from 'axios'; import axios from 'axios';
import { Swal } from 'sweetalert2';
function MainLayer() { function MainLayer() {
...@@ -33,6 +34,9 @@ function MainLayer() { ...@@ -33,6 +34,9 @@ function MainLayer() {
color: 'white' color: 'white'
} }
const acctoken_cookies = document.cookie.split('=')[1];
// console.log(acctoken_cookies)
const logined = localStorage.getItem('nickname') const logined = localStorage.getItem('nickname')
const [airUsing, setAirUsing] = useState(false) const [airUsing, setAirUsing] = useState(false)
...@@ -51,6 +55,25 @@ function MainLayer() { ...@@ -51,6 +55,25 @@ function MainLayer() {
} }
}); });
var deleteCookie = function (name) {
document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
Swal.fire({
title: '로그아웃 성공!',
text: '🙏 안녕히 가세요 🙏',
icon: 'warning',
customClass: 'swal-wide',
confirmButtonText: '확인',
}).then((res) => {
if (res.isConfirmed) {
window.location.replace('/')
}
else {
window.location.replace('/')
}
})
}
return ( return (
<Col> <Col>
<Row className='d-flex align-items-center m-auto w-100 p-0'> <Row className='d-flex align-items-center m-auto w-100 p-0'>
...@@ -63,7 +86,7 @@ function MainLayer() { ...@@ -63,7 +86,7 @@ function MainLayer() {
<UserInfo /> <UserInfo />
</Row> </Row>
{logined && {acctoken_cookies &&
<Form <Form
key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}> key='checkbox' className="d-flex justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
<Form.Check <Form.Check
...@@ -78,9 +101,9 @@ function MainLayer() { ...@@ -78,9 +101,9 @@ function MainLayer() {
<Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'> <Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'>
<ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}> <ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}>
{logined ? {acctoken_cookies ?
//true //true
<Button variant='light' style={btnstyled} onClick={kakaoLogout}> <Button variant='light' style={btnstyled} onClick={kakaoLogout || deleteCookie('acs_token')}>
로그아웃 로그아웃
</Button> </Button>
: :
...@@ -91,7 +114,7 @@ function MainLayer() { ...@@ -91,7 +114,7 @@ function MainLayer() {
</Link> </Link>
</Button> </Button>
} }
{!logined && {!acctoken_cookies &&
<Button variant='light' style={btnstyled}> <Button variant='light' style={btnstyled}>
<Link to='/signup' id='btnlink'> <Link to='/signup' id='btnlink'>
회원가입 회원가입
......
...@@ -2,6 +2,7 @@ import React, { useState } from 'react' ...@@ -2,6 +2,7 @@ import React, { useState } from 'react'
import '../App.css' import '../App.css'
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap'; import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
import { LoginWithKakao } from '../utils/Oauth'; import { LoginWithKakao } from '../utils/Oauth';
import axios from 'axios';
function SignupComp() { function SignupComp() {
...@@ -28,7 +29,7 @@ function SignupComp() { ...@@ -28,7 +29,7 @@ function SignupComp() {
} }
const initValues = { const initValues = {
name: '', nick_name: '',
email: '' email: ''
} }
...@@ -43,55 +44,28 @@ function SignupComp() { ...@@ -43,55 +44,28 @@ function SignupComp() {
function handleChange(event) { function handleChange(event) {
const { name, value } = event.target const { name, value } = event.target
setFormValues({ ...formValues, [name]: value }) setFormValues({ ...formValues, [name]: value })
console.log('???', formValues)
} }
console.log('???', formValues)
function CheckUserExist() {
localStorage.setItem('signup_username', formValues.name) // function CheckUserExist() {
localStorage.setItem('signup_email_Address', formValues.email) // const signUser = localStorage.getItem('signup_username')
// const signEmail = localStorage.getItem('signup_email_Address').split('@')[1]
const signUser = localStorage.getItem('signup_username')
const signEmail = localStorage.getItem('signup_email_Address').split('@')[1] // if (signEmail && signUser) {
// setAlertShow(true)
if (signEmail && signUser) { // setUserExist(!userExist)
setAlertShow(true) // }
setUserExist(!userExist) // else
} // if (!signEmail) {
else // setAlertShow(false)
if (!signEmail) { // }
setAlertShow(false) // }
// setUserExist(true)
} async function handleSubmit(event) {
} event.preventDefault();
await axios.post("/api/signup", formValues)
function handleSubmit(event) {
const form = event.currentTarget;
console.log('formValues', formValues);
console.log('formValues.values', Object.values(formValues)[0].length);
// console.log(form)
// if (Object.values(formValues)[0].length !== 0) { //form.checkValidity() === false
// event.preventDefault();
// event.stopPropagation();
// }
console.log(validated)
setValidated(true);
// const form = event.current
// setFormError(validate(formValues))
// setIsSubmit(true)
}
function handleClickSubm() {
// setEmailSubm(true);
const subm = document.getElementById("subm-mailSent");
subm.style.visibility = 'visible'
// const aftermail = document.getElementById('AftermailSent');
// aftermail.style.display = ''
} }
return ( return (
<Row className='text-center w-100 my-2'> <Row className='text-center w-100 my-2'>
...@@ -129,14 +103,13 @@ function SignupComp() { ...@@ -129,14 +103,13 @@ function SignupComp() {
<Form style={inboxstyled} onSubmit={handleSubmit}> <Form style={inboxstyled} onSubmit={handleSubmit}>
<FloatingLabel <FloatingLabel
controlId="floatingInput" controlId="floatingInput"
label="Name" label="Nickname"
className='mb-3' className='mb-3'
> >
<Form.Control <Form.Control
type="text" type="text"
name="name" name="nick_name"
placeholder="Name" placeholder="Nickname"
value={formValues.name}
onChange={handleChange} onChange={handleChange}
required required
/> />
...@@ -149,14 +122,13 @@ function SignupComp() { ...@@ -149,14 +122,13 @@ function SignupComp() {
type="email" type="email"
name="email" name="email"
placeholder="Email Address" placeholder="Email Address"
value={formValues.email}
onChange={handleChange} onChange={handleChange}
required required
/> />
</FloatingLabel> </FloatingLabel>
<Button variant='light' className='mt-3' id='formbtn' type='submit' onClick={CheckUserExist}> <Button variant='light' className='mt-3' id='formbtn' type='submit'>
{/* type="submit" */} {/* onClick={CheckUserExist} */}
Sign Up Sign Up
</Button> </Button>
</Form> </Form>
......
...@@ -32,31 +32,33 @@ function Home() { ...@@ -32,31 +32,33 @@ function Home() {
padding: '0' padding: '0'
} }
const getusername = axios.get(`/api/user`) async function test() {
console.log(getusername) const res = await axios.get("/api/user-info", { withCredentials: true })
console.log("@@@@", res)
}
test()
return ( return (
<Container className='m-auto d-flex position-relative' <Container className='m-auto d-flex position-relative'
style={{ flexDirection: 'column' }} fluid> style={{ flexDirection: 'column' }} fluid>
<Row className='d-flex'> <Row className='d-flex'>
<Row style={constyled} className='m-auto'> <Row style={constyled} className='m-auto'>
<Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'> <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
<Row style={col1sty} className='m-auto'> <Row style={col1sty} className='m-auto'>
<MainLayer /> <MainLayer />
</Row> </Row>
</Col> </Col>
<Col md={6} style={col2sty}> <Col md={6} style={col2sty}>
{/* <TimeNow /> */} {/* <TimeNow /> */}
<EueSuggest /> <EueSuggest />
<ChartLine /> <ChartLine />
<ChartDoughnut /> <ChartDoughnut />
<Donation /> <Donation />
</Col> </Col>
</Row>
</Row> </Row>
</Container> </Row>
</Container>
); );
} }
......
...@@ -18,7 +18,9 @@ const app = express(); ...@@ -18,7 +18,9 @@ const app = express();
app.set("view engine", "pug"); app.set("view engine", "pug");
app.set("views", path.join(__dirname, "views")); app.set("views", path.join(__dirname, "views"));
app.use(cors()); app.use(cors({
credentials: true
}));
app.use(helmet()); app.use(helmet());
app.use(cookieParser()); app.use(cookieParser());
app.use(express.json()); app.use(express.json());
......
...@@ -148,7 +148,7 @@ export const getConfirm = async (req, res) => { ...@@ -148,7 +148,7 @@ export const getConfirm = async (req, res) => {
res res
.status(server_status.code.ok) .status(server_status.code.ok)
.cookie("acs_token", accessT) .cookie("acs_token", accessT)
.redirect("/api"); .redirect("http://localhost:3000/");
} catch (err) { } catch (err) {
res res
.status(server_status.code.err) .status(server_status.code.err)
......
...@@ -20,6 +20,8 @@ export const onlyPrivate = (req, res, next) => { ...@@ -20,6 +20,8 @@ export const onlyPrivate = (req, res, next) => {
cookies: { acs_token }, cookies: { acs_token },
} = req; } = req;
console.log('@@@@@@@@@@@@@@',req.cookies);
try { try {
const acs_decode = jwt.verify(acs_token, envs.secretKey.access_token); const acs_decode = jwt.verify(acs_token, envs.secretKey.access_token);
next(); next();
......
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