Commit c748afc4 authored by 우지원's avatar 우지원
Browse files

로그인, 회원가입 localStorage에 저장

parent 00e7f876
import React from 'react' import React from 'react'
import { Navbar, Nav, Button } from 'react-bootstrap'; import { Navbar, Nav, Button } from 'react-bootstrap';
import { handleLogout } from '../utils/auth';
function Menu() { function Menu() {
const userName = "정연우"; const userName = "정연우";
...@@ -13,7 +14,7 @@ function Menu() { ...@@ -13,7 +14,7 @@ function Menu() {
<Nav.Link href="/profile">Profile</Nav.Link> <Nav.Link href="/profile">Profile</Nav.Link>
<Nav.Link href="/hello">Hello</Nav.Link> <Nav.Link href="/hello">Hello</Nav.Link>
</Nav> </Nav>
<Button variant="light" className="ml-3">Logout</Button> <Button onClick={() => handleLogout()} variant="light" className="ml-3">Logout</Button>
</Navbar> </Navbar>
) )
} }
......
...@@ -36,19 +36,19 @@ function LogIn() { ...@@ -36,19 +36,19 @@ function LogIn() {
async function handleSubmit(event) { async function handleSubmit(event) {
event.preventDefault() event.preventDefault()
const form = event.currentTarget; // const form = event.currentTarget;
if (form.checkValidity() === false) { // if (form.checkValidity() === false) {
event.preventDefault(); // event.preventDefault();
event.stopPropagation(); // event.stopPropagation();
} // }
setValidated(true); // setValidated(true);
try { try {
setLoading(true) setLoading(true)
setError('') setError('')
await axios.post('/auth/login', user) await axios.post('/auth/login', user)
// 알아서 stringify하기 때문에 따로 해줄 필요 없음. // 알아서 stringify하기 때문에 따로 해줄 필요 없음.
handleLogin() handleLogin(user)
setSucces(true) setSucces(true)
} catch (error) { } catch (error) {
catchErrors(error, setError) catchErrors(error, setError)
...@@ -76,7 +76,7 @@ function LogIn() { ...@@ -76,7 +76,7 @@ function LogIn() {
<Container className="d-flex justify-content-center"> <Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75"> <div className="mt-5 p-5 shadow w-75">
<h2 className="text-center ">로그인</h2> <h2 className="text-center">로그인</h2>
<Form.Group controlId="formGroupEmail"> <Form.Group controlId="formGroupEmail">
<Form.Label>이메일</Form.Label> <Form.Label>이메일</Form.Label>
......
...@@ -41,7 +41,7 @@ function SingUp() { ...@@ -41,7 +41,7 @@ function SingUp() {
event.stopPropagation(); event.stopPropagation();
} }
setValidated(true); setValidated(true);
console.log(user) // console.log(user)
try { try {
setError('') setError('')
...@@ -59,6 +59,7 @@ function SingUp() { ...@@ -59,6 +59,7 @@ function SingUp() {
// 알아서 stringify하기 때문에 따로 해줄 필요 없음. // 알아서 stringify하기 때문에 따로 해줄 필요 없음.
// console.log(response.data) // console.log(response.data)
console.log(user) console.log(user)
// ?????????hash 처리된 password가 저장되지 않았음
// setUser(INIT_USER) // setUser(INIT_USER)
} catch (error) { } catch (error) {
......
import axios from "axios" import axios from "axios"
//자동으로 localstorage에 login이 생성됨 //자동으로 localstorage에 login이 생성됨
export function handleLogin() { export function handleLogin(props) {
localStorage.setItem('loginStatus', 'true') localStorage.setItem('user', JSON.stringify({email: props.email}))
} }
export async function handleLogout() { export async function handleLogout() {
localStorage.removeItem('loginStatus') localStorage.removeItem('user')
await axios.get('/api/auth/logout') await axios.get('/auth/logout')
} }
\ No newline at end of file
...@@ -2,8 +2,7 @@ import User from "../models/User.js" ...@@ -2,8 +2,7 @@ import User from "../models/User.js"
import bcrypt from 'bcryptjs' import bcrypt from 'bcryptjs'
import jwt from 'jsonwebtoken' import jwt from 'jsonwebtoken'
import config from "../config.js" import config from "../config.js"
//꼭 js붙여주기!! //server부분에는 꼭 js붙여주기!!
//isEmail
//sign validation해야됨 //sign validation해야됨
const login = async (req, res) => { const login = async (req, res) => {
...@@ -14,9 +13,10 @@ const login = async (req, res) => { ...@@ -14,9 +13,10 @@ const login = async (req, res) => {
try { try {
// 1) 사용자 확인 // 1) 사용자 확인
const user = await User.findOne({ email }).select('+password') const user = await User.findOne({ email }).select('+password')
// 2) 이메일 사용자가 없으면 에러 반환 // 2) 이메일 사용자가 없으면 에러 반환
if (!user) { if (!user) {
return res.status(404).send(`${email} 없습니다`) return res.status(404).send(`${email}을 사용하는 사용자가 없습니다`)
} }
// 3) 비밀번호 일치 확인 // 3) 비밀번호 일치 확인
...@@ -25,11 +25,10 @@ const login = async (req, res) => { ...@@ -25,11 +25,10 @@ const login = async (req, res) => {
// 4) 비밀번호가 맞으면 토큰 생성 후 쿠키에 저장 // 4) 비밀번호가 맞으면 토큰 생성 후 쿠키에 저장
if (passwordMatch) { if (passwordMatch) {
//토큰 생성 //토큰 생성
const token = jwt.sign({ userId: user._id }, config.jwtSecret, { const token = jwt.sign({ userId: user._id }, config.jwtSecret, {expiresIn: '7d'})
//jwtSecret : 노출되면 안됨. 문자열 //jwtSecret : 노출되면 안됨. 문자열
expiresIn: '7d' //expiresIn: '7d' -> 만기날짜 : 만든 7일후 만기
//만기날짜 : 만든 7일후 만기
})
//쿠키에 저장 //쿠키에 저장
//res : client로 넘어가는 객체 cookie('이름', value) //res : client로 넘어가는 객체 cookie('이름', value)
res.cookie('token', token, { res.cookie('token', token, {
...@@ -37,10 +36,11 @@ const login = async (req, res) => { ...@@ -37,10 +36,11 @@ const login = async (req, res) => {
//생성일로부터 어느정도까지 살아있을 것인가 //생성일로부터 어느정도까지 살아있을 것인가
httpOnly: true, httpOnly: true,
//client에서 javascript로 접근할 수 없음 //client에서 javascript로 접근할 수 없음
secure: config.env === 'production' secure: config.env === 'production',
//secure가 true이면 http로 접근하면 cookie가 들어가지 않음. //secure가 true이면 http로 접근하면 cookie가 들어가지 않음.
}) })
res.send('Login Successful') res.send('Login Successful')
} else { } else {
// 5) 비밀번호가 틀리면 에러 반환 // 5) 비밀번호가 틀리면 에러 반환
res.status(401).send('비밀번호가 일치하지 않습니다') res.status(401).send('비밀번호가 일치하지 않습니다')
......
...@@ -48,7 +48,7 @@ const signup = async (req, res) => { ...@@ -48,7 +48,7 @@ const signup = async (req, res) => {
username, username,
nickname, nickname,
email, email,
password, password: hash,
//required를 하였기 때문에 이중 하나라도 없으면 에러 발생 //required를 하였기 때문에 이중 하나라도 없으면 에러 발생
}).save() }).save()
//save시 user schema형식에 맞는지 확인후 틀리면 error발생 맞으면 mongooDb로 들어감 //save시 user schema형식에 맞는지 확인후 틀리면 error발생 맞으면 mongooDb로 들어감
...@@ -59,7 +59,7 @@ const signup = async (req, res) => { ...@@ -59,7 +59,7 @@ const signup = async (req, res) => {
} catch (error) { } catch (error) {
//알수없는 모든 에러발생시 처리 //알수없는 모든 에러발생시 처리
console.log(error) console.log(error)
res.status(500).send('User signup error') res.status(500).send('회원가입 에러발생하였습니다.')
} }
//newUSer (객체)를 json형식으로 바꿔서 객체열로 보냄 //newUSer (객체)를 json형식으로 바꿔서 객체열로 보냄
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import mongoose from 'mongoose' import mongoose from 'mongoose'
const {String} = mongoose.Schema.Types const { String } = mongoose.Schema.Types
//원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴. //원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴.
//object의 id를 쓸때에도 추가시켜줘야됨. //object의 id를 쓸때에도 추가시켜줘야됨.
...@@ -29,14 +29,6 @@ const UserSchema = new mongoose.Schema({ ...@@ -29,14 +29,6 @@ const UserSchema = new mongoose.Schema({
//정보를 찾을때 찾지 않게함 //정보를 찾을때 찾지 않게함
//플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨) //플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨)
}, },
// role: {
// type: String,
// required: true,
// default: 'user',
// enum: ['user', 'admin', 'root'],
// //열거, 배열 : role이라는 것이 'user', 'admin', 'root'중 하나를 쓰임
// //사용자에 역할을 줄 때 사용함.
//}
},{ },{
//옵셥을 정의함. //옵셥을 정의함.
timestamps: true timestamps: true
......
...@@ -6,6 +6,7 @@ const router = express.Router() ...@@ -6,6 +6,7 @@ const router = express.Router()
router.route('/auth/login') router.route('/auth/login')
.post(authCtrl.login) .post(authCtrl.login)
.get(authCtrl.login)
router.route('/auth/logout') router.route('/auth/logout')
.get(authCtrl.logout) .get(authCtrl.logout)
......
import express from 'express' import express from 'express'
import connectDb from './utils/connectDb.js' import connectDb from './utils/connectDb.js'
import userRouter from './routes/user.routes.js' import userRouter from './routes/user.routes.js'
import authRouter from './routes/auth.routes.js'
connectDb() connectDb()
...@@ -12,6 +13,7 @@ app.use(express.json()) ...@@ -12,6 +13,7 @@ app.use(express.json())
//이부분 다음부터는 req.body라는 부분을 실행할 수 있음 //이부분 다음부터는 req.body라는 부분을 실행할 수 있음
app.use(userRouter) app.use(userRouter)
app.use(authRouter)
//userRouter로 이동 //userRouter로 이동
app.get('/', (req, res) => { app.get('/', (req, res) => {
......
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