! 인증 체크하기 !

HOC(Higher Order Component)

: 다른 컴포넌트를 받은 다음에, 새로운 컴포넌트를 반환한다.

: 받은 컴포넌트가 인증된 것만 새로운 컴포넌트를 반환해준다.

 

만약, 이미 로그인한 상태였다면 로그인 페이지가 아닌 다른 페이지를 반환해줘야 한다.

 

 

1. auth.js 에서 로그인한 상태로는 들어갈 수 없거나, 관리자 권한 없이는 들어가지 못하는 경우를 처리해준다.

 

만약 로그인하지 않았는데 option이 true라 로그인한 유저만 출입가능하다면,

로그인 페이지로 이동

 

만약 로그인하였는데 관리자만 들어갈 수 있는 페이지이고, 나는 관리자가 아니라면

landing page로 이동

 

만약 로그인하였는데 option이 false라서 로그인한 유저는 출입 불가능이라면

landing page로 이동

 

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

export default function ( SpecificComponent, option, adminRoute = null ){       // adminRoute 는 관리자만 들어갈수있는

    // option //
    // null : 아무나 출입가능
    // true : 로그인한 유저만 출입가능
    // false : 로그인한 유저는 출입불가능

    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
}

auth.js