[React & NodeJS]공부#6

jeje·2021년 6월 25일

React nodejs

React & Node

목록 보기

6/6

날짜 : 21.06.26
참고 강의

[React.js]

1. 회원가입 페이지

로그인 페이지와 양식이 거의 비슷하여 상당 수 복사하여 붙여넣었음

[_actions]-[types.js] 코드 추가

export const REGISTER_USER = "register_user";

[_actions]-[user_action.js] 코드 추가

import axios from 'axios';
import {
    LOGIN_USER,
    REGISTER_USER,
} from './types';

export function registerUser(dataToSubmit) {
    const request = axios.post('/api/users/register', dataToSubmit)
        .then(response => response.data)

    return {
        type: REGISTER_USER,
        payload: request,
    }
}

[_reducers]-[user_reducer] 코드 추가

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

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

        case REGISTER_USER:
            return { ...state, register: action.payload }
            break;

        default:
            return state;
    }
};

[RegisterPage.js]

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

function RegisterPage(props) {
    const dispatch = useDispatch();
    const [Email, setEmail] = useState("");
    const [Name, setName] = useState("");
    const [Password, setPassword] = useState("");
    const [ConfirmPassword, setConfirmPassword] = useState("");

    const onEmailHandler = (event) => {
        setEmail(event.currentTarget.value)
    };

    const onNameHandler = (event) => {
        setName(event.currentTarget.value)
    };

    const onPasswordHandler = (event) => {
        setPassword(event.currentTarget.value)
    };

    const onConfirmPasswordHandler = (event) => {
        setConfirmPassword(event.currentTarget.value)
    };

    const onSubmitHandler = (event) => {
        event.preventDefault(); // 페이지 refresh 방지

        if(Password !== ConfirmPassword){
            return alert('비밀번호가 일치하지 않습니다.');
        };

        let body = {
            email: Email,
            name: Name,
            password: Password,
        };

        dispatch(registerUser(body))
            .then(response => {
                if (response.payload.success) {
                    props.history.push('/login')
                } else {
                    alert('회원가입을 실패하였습니다.')
                }
            })

    };

    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>Name</label>
                <input type='text' value={Name} onChange={onNameHandler} />
                <label>Password</label>
                <input type='password' value={Password} onChange={onPasswordHandler} />
                <label>Confirm Password</label>
                <input type='password' value={ConfirmPassword} onChange={onConfirmPasswordHandler} />
                <br />
                <button>
                    회원가입
                </button>
            </form>
        </div>
    )
}

export default RegisterPage;

🔽 화면 🔽

Redux로 회원가입 결과 확인

2. 로그아웃

[LandingPage.js]에 로그아웃 버튼 생성

function LandingPage(props){
...
...
const onClickHandler=()=>{
        axios.get('/api/users/logout')
        .then(response => {
            if(response.data.success){
                props.history.push('/login');
            }else{
                alert('로그아웃에 실패하였습니다');
            }
        });

return(
...
...
<button onClick={onClickHandler}>로그아웃</button>
);

3. 인증 체크

[_actions]-[user_action.js] 코드 추가

import {
    LOGIN_USER,
    REGISTER_USER,
    AUTH_USER,
} from './types';

export function auth() {
    const request = axios.get('/api/users/auth')
        .then(response => response.data)

    return {
        type: AUTH_USER,
        payload: request,
    }
}

[_actions]-[types.js] 코드 추가

export const AUTH_USER = "auth_user";

[_reducers]-[user_reducer.js] 코드 추가

import {
    LOGIN_USER,
    REGISTER_USER,
    AUTH_USER,
} from '../_actions/types';

export default function (state = {}, action) {
    switch (action.type) {
        ...
        ...
        
        case AUTH_USER:
            return { ...state, userData: action.payload }
            break;
        ...
        ...
    }
};

[hoc]-[auth.js] 생성

option
1) null => 누구든지 출입이 가능한 페이지
2) true => 로그인을 한 유저만 출입이 가능한 페이지
3) false => 로그인을 한 유저는 출입이 불가능한 페이지

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

export default function (SpecificComponent, option, adminRoute = null) {

    function AuthenticationCheck(props) {

        const dispatch = useDispatch();

        useEffect(() => {


            dispatch(auth()).then(response => {
                console.log(response);

                //로그인하지 않은 상태
                if (!response.payload.isAuth) {
                    if (option) {
                        props.history.push('/login');
                    }
                } else {
                    //로그인 한 상태
                    if (adminRoute && !response.payload.isAdmin) {
                        props.history.push('/')
                    } else {
                        if (option === false) {
                            props.history.push('/')
                        }
                    }
                }
            });
        }, []);
        return (
            <SpecificComponent />
        );
    };
    return AuthenticationCheck;
};

[App.js] 수정

import Auth from './hoc/auth';

function App(){
	return(
      ...
      <Switch>
          <Route exact path="/" component={Auth(LandingPage, null)} />
          <Route exact path="/login" component={Auth(LoginPage, false)} />
          <Route exact path="/register" component={Auth(RegisterPage, false)} />

        </Switch>
		...
    )
}