반응형
< 전체 과정 >
로그인 -> 이메일 -> 비밀번호 -> 확인
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 LoginPageLoginPage.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 가 뜨는지 확인한다.
반응형
'Programming > MERN' 카테고리의 다른 글
| HTML 정리 (0) | 2020.12.22 |
|---|---|
| ! 인증 체크하기 ! (0) | 2020.11.10 |
| Node.js 와 스프링의 차이 🤫 (0) | 2020.11.10 |
| 🌺 회원가입 페이지 만들기 🌺 (0) | 2020.11.09 |
| CSS Framework / Redux 개념 및 설정 (0) | 2020.11.02 |
