👨‍👩‍👧‍👦 로그인 페이지 만들기 👨‍👩‍👧‍👧

< 전체 과정 >

로그인 -> 이메일 -> 비밀번호 -> 확인

 

 

1. 프로그램 실행

npm run dev

-> server와 client 모두 실행, client의 LandingPage가 로드된다.

 

 

2. LandingPage 디자인 수정

 

<div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            width: '100%', height: '100vh'
}}>
     <h2>시작 페이지</h2>
</div>

 

 

- 페이지 새로고침 방지

event.preventDefault()

 

 

 

 

3. Redux를 이용한 LoginPage

 

import React, {useState} from 'react'
import {useDispatch} from 'react-redux';
import {loginUser} from '../../../_actions/user_action'

function LoginPage(props){
    const dispatch = useDispatch();

    const [Email, setEmail] = useState("")
    const [Password, setPassword] = useState("")
    const onEmailHandler = (event) => {
        setEmail(event.currentTarget.value)
    } 
    const onPasswordHandler = (event) => {
        setPassword(event.currentTarget.value)
    }
    const onSubmitHandler = (event) => {
        event.preventDefault()

        let body = {
            email: Email,
            password: Password
        }

        dispatch(loginUser(body))
        .then(response => {
            if(response.payload.loginSuccess){
                props.history.push('/');
            } else {
                alert('Error ');
            }
        })
    }


    return (
        <div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            width: '100%', height: '100vh'
        }}>
            <form style={{ display: 'flex', flexDirection: 'column'}}
                onSubmit={onSubmitHandler}
            >
                <label>Email</label>
                <input type="email" value={Email} onChange={onEmailHandler}/>
                <label>Password</label>
                <input type="password" value={Password} onChange={onPasswordHandler}/>

                <br />
                <button>
                    Login
                </button>
            </form>
        </div>
    )
}

export default LoginPage

LoginPage.js

 

 

 

 

4. user_reducer 만들어주기

 

import {
    LOGIN_USER
} from '../_actions/types';

export default function (state = {}, action) {
    switch (action.type) {
        case LOGIN_USER:
            return { ...state, loginSuccess: action.payload }
    
        default:
            return state;
    }
}

user_reducer.js

 

 

-> 로그인 성공 시, loginSuccess가 뜨도록 해준다.

 

 

app.post('/api/users/login',(req, res) => {

  // 요청된 이메일은 데이터베이스에서 있는지 찾는다.
  User.findOne({ email: req.body.email }, (err, user) => {
    console.log(err)
    if(!user){
      return res.json({
        loginSuccess: false,
        message: "제공된 이메일에 해당하는 유저가 없습니다."
      })
    }
    // 요청된 이메일이 데이버테이스에 있다면, 비밀번호가 맞는 비번인지 확인한다.
    user.comparePassword(req.body.password, (err, isMatch) => {
      console.log(err)
      if(!isMatch) 
          return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다."})

      // 비밀번호까지 맞다면 토큰을 생성하기
      user.generateToken((err, user) => {
        console.log(err)
        if(err) return res.status(400).send(err);

        // 토큰을 저장한다. 어디에?  쿠키, 로컬스토리지
        res.cookie("x_auth", user.token)  
        .status(200)
        .json({ loginSuccess: true, userId: user._id ,message: "비밀번호가 맞았습니다."})

      })
    })
  })
})

index.js(server)

 

 

-> 전에 index.js에서 설정해준 정보들이 나타난다.

 

 

 

5. reducers 안에 reducer를 관리하는 index.js 를 생성해준다.

 

import { combineReducers } from 'redux';
import user from './user_reducer';

const rootReducer = combineReducers({
    user
})

export default rootReducer;

index.js

 

-> reducer들은 여기에서 가져와서 사용하기로 한다.

 

 

 

 

6. user_action 만들기

 

import axios from 'axios';
import {
    LOGIN_USER
} from './types';
export function loginUser(dataTosubmit){
    const request = axios.post('/api/users/login', dataTosubmit)
        .then(response => response.data)

    return {
        type: LOGIN_USER,
        payload: request
    }
}

user_action.js

 

-> login action을 생성해준다.

 

 

 

 

6. 크롬에서 확인

 

Redux DevTools 라는 크롬 익스텐션을 설치해서

로그인 후 loginSuccess 가 뜨는지 확인한다.