React : 인증 체크

HOC

: higher order component

function
다른 component를 받아 새로운 componenet를 return하는 function
const EnhancedComponent = higherOrderComponent(WrappedComponent);

Auth(HOC) 안에 여러 component를 넣어, 해당 유저가 해당 페이지에 들어갈 자격이 됐을 때엔 내부 component에 접근 가능하도록

Auth(HOC) 가 Backend에 REQUEST를 보내 상태를 받아오면, 그 상태를 통해 내부 component에 접근하지 못하도록 다른 페이지로 보내기

• client/src/hoc/auth.js

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

export default function (SpecificComponent, option, adminRoute = null) {
    //SpecificComponent : LandingPage component
    // option : null / true / false
    //  if null : 아무나 출입이 가능
    // if true : 로그인한 유저만 출입이 가능
    // if false : 로그인한 유저는 출입이 불가능한 페이지

    // adminRoute : true이면 admin user만 출입 가능

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

        // page가 이동할때마다 dispatch가 작동
        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) {
                            props.history.push('/')
                        }
                    }
                 }
            })
            
        }, [])
        return (
            <SpecificComponent/>
        )
    }
    

    return AuthenticationCheck
}

• App.js

<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>