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

client/src/Components/Menu.js

 import React from 'react'
 import { Navbar, Nav, Button } from 'react-bootstrap';
+import { handleLogout } from '../utils/auth';
 
 function Menu() {
   const userName = "정연우";
@@ -13,7 +14,7 @@ function Menu() {
         <Nav.Link href="/profile">Profile</Nav.Link>
         <Nav.Link href="/hello">Hello</Nav.Link>
       </Nav>
-      <Button variant="light" className="ml-3">Logout</Button>
+      <Button onClick={() => handleLogout()} variant="light" className="ml-3">Logout</Button>
     </Navbar>
   )
 }

client/src/Pages/LogInPage.js

@@ -36,19 +36,19 @@ function LogIn() {
     async function handleSubmit(event) {
         event.preventDefault()
 
-        const form = event.currentTarget;
-        if (form.checkValidity() === false) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        setValidated(true);
+        // const form = event.currentTarget;
+        // if (form.checkValidity() === false) {
+        //     event.preventDefault();
+        //     event.stopPropagation();
+        // }
+        // setValidated(true);
 
         try {
             setLoading(true)
             setError('')
             await axios.post('/auth/login', user)
             // 알아서 stringify하기 때문에 따로 해줄 필요 없음.
-            handleLogin()
+            handleLogin(user)
             setSucces(true)
         } catch (error) {
             catchErrors(error, setError)
@@ -76,7 +76,7 @@ function LogIn() {
                 <Container className="d-flex justify-content-center">
                     <div className="mt-5 p-5 shadow w-75">
 
-                        <h2 className="text-center ">로그인</h2>
+                        <h2 className="text-center">로그인</h2>
 
                         <Form.Group controlId="formGroupEmail">
                             <Form.Label>이메일</Form.Label>

client/src/Pages/SignUpPage.js

@@ -41,7 +41,7 @@ function SingUp() {
             event.stopPropagation();
         }
         setValidated(true);
-        console.log(user)
+        // console.log(user)
 
         try {
             setError('')
@@ -59,6 +59,7 @@ function SingUp() {
             // 알아서 stringify하기 때문에 따로 해줄 필요 없음.
             // console.log(response.data)
             console.log(user)
+            // ?????????hash 처리된 password가 저장되지 않았음
 
             // setUser(INIT_USER)
         } catch (error) {

client/src/utils/auth.js

 import axios from "axios"
 
 //자동으로 localstorage에 login이 생성됨
-export function handleLogin() {
-    localStorage.setItem('loginStatus', 'true')
+export function handleLogin(props) {
+    localStorage.setItem('user', JSON.stringify({email: props.email}))
 }
 
 
 export async function handleLogout() {
-    localStorage.removeItem('loginStatus')
-    await axios.get('/api/auth/logout')
+    localStorage.removeItem('user')
+    await axios.get('/auth/logout')
 }
\ No newline at end of file

server/controllers/auth.controller.js

@@ -2,8 +2,7 @@ import User from "../models/User.js"
 import bcrypt from 'bcryptjs'
 import jwt from 'jsonwebtoken'
 import config from "../config.js"
-//꼭 js붙여주기!!
-//isEmail
+//server부분에는 꼭 js붙여주기!!
 
 //sign validation해야됨
 const login = async (req, res) => {
@@ -14,9 +13,10 @@ const login = async (req, res) => {
     try {
         // 1) 사용자 확인
         const user = await User.findOne({ email }).select('+password')
+        
         // 2) 이메일 사용자가 없으면 에러 반환
         if (!user) {
-            return res.status(404).send(`${email}이 없습니다`)
+            return res.status(404).send(`${email}을 사용하는 사용자가 없습니다`)
         }
 
         // 3) 비밀번호 일치 확인
@@ -25,11 +25,10 @@ const login = async (req, res) => {
         // 4) 비밀번호가 맞으면 토큰 생성 후 쿠키에 저장
         if (passwordMatch) {
             //토큰 생성
-            const token = jwt.sign({ userId: user._id }, config.jwtSecret, {
+            const token = jwt.sign({ userId: user._id }, config.jwtSecret, {expiresIn: '7d'})
             //jwtSecret : 노출되면 안됨. 문자열
-                expiresIn: '7d'
-                //만기날짜 : 만든 7일후 만기
-            })
+            //expiresIn: '7d' -> 만기날짜 : 만든 7일후 만기
+
             //쿠키에 저장
             //res : client로 넘어가는 객체 cookie('이름', value)
             res.cookie('token', token, {
@@ -37,10 +36,11 @@ const login = async (req, res) => {
                 //생성일로부터 어느정도까지 살아있을 것인가
                 httpOnly: true,
                 //client에서 javascript로 접근할 수 없음
-                secure: config.env === 'production'
+                secure: config.env === 'production',
                 //secure가 true이면 http로 접근하면 cookie가 들어가지 않음.
             })
             res.send('Login Successful')
+
         } else {
             // 5) 비밀번호가 틀리면 에러 반환
             res.status(401).send('비밀번호가 일치하지 않습니다')

server/controllers/user.controller.js

@@ -48,7 +48,7 @@ const signup = async (req, res) => {
             username,
             nickname,
             email,
-            password,
+            password: hash,
             //required를 하였기 때문에 이중 하나라도 없으면 에러 발생
         }).save()
         //save시 user schema형식에 맞는지 확인후 틀리면 error발생 맞으면 mongooDb로 들어감
@@ -59,7 +59,7 @@ const signup = async (req, res) => {
     } catch (error) {
         //알수없는 모든 에러발생시 처리
         console.log(error)
-        res.status(500).send('User signup error')
+        res.status(500).send('회원가입 에러발생하였습니다.')
     }
 
     //newUSer (객체)를 json형식으로 바꿔서 객체열로 보냄

server/models/User.js

@@ -2,7 +2,7 @@
 
 import mongoose from 'mongoose'
 
-const {String} = mongoose.Schema.Types
+const { String } = mongoose.Schema.Types
 //원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴.
 //object의 id를 쓸때에도 추가시켜줘야됨.
 
@@ -29,14 +29,6 @@ const UserSchema = new mongoose.Schema({
         //정보를 찾을때 찾지 않게함
         //플러스 옵션을 주면 찾을 수 있음(mongoose에서 용법찾아봐야됨)
     },
-    // role: {
-    //     type: String,
-    //     required: true,
-    //     default: 'user',
-    //     enum: ['user', 'admin', 'root'],
-    //     //열거, 배열 : role이라는 것이 'user', 'admin', 'root'중 하나를 쓰임
-    //     //사용자에 역할을 줄 때 사용함.
-    //}
 },{
     //옵셥을 정의함.
     timestamps: true

server/routes/auth.routes.js

@@ -6,6 +6,7 @@ const router = express.Router()
 
 router.route('/auth/login')
     .post(authCtrl.login)
+    .get(authCtrl.login)
 
 router.route('/auth/logout')
     .get(authCtrl.logout)

server/server.js

 import express from 'express'
 import connectDb from './utils/connectDb.js'
 import userRouter from './routes/user.routes.js'
+import authRouter from './routes/auth.routes.js'
 
 connectDb()
 
@@ -12,6 +13,7 @@ app.use(express.json())
 //이부분 다음부터는 req.body라는 부분을 실행할 수 있음
 
 app.use(userRouter)
+app.use(authRouter)
 //userRouter로 이동
 
 app.get('/', (req, res) => {