React_AUTH&HOC

 1. auth function 만들기 

 function (SpecificComponent, option, adminRoute = null) {

-SpecificComponent : 컴포넌트명

-option : null(아무나 출입 가능), true(로그인 유저 출입), false(로그인 유저 출입 X)

-adminRoute : true(admin 계정만), null(x, =null ; 기본값이 null임)

function AuthenticationCheck(props){

        const dispatch=useDispatch();

        useEffect(() => {

            dispatch(auth()).then(response=>{ 

 

                //로그인하지 않은 상태

                if(!response.payload.isAuth){

                    if(option){

                        props.history.push('/login')

                    }

                }else{

                    //로그인 한 상태

                    if(adminRoute && !response.payload.isAdimin){

                        props.history.push('/')

                    }else{

                        if(option === false){ 

                            props.history.push('/')

                        } ....

        return(

            <SpecificComponent />

        )

}

return AuthenticationCheck

 

>> . user_action, user_reducer 만들기

 

 

1. specCom, option, admin 인자로 한 function

2. auth check하는 action function (dispatch)

3. component return 하기

4. auth check function 실행

 

 

 

 2. auth function으로 감싸주기 

-App.js-

 

import Auth from './hoc/auth'

 

<Route exact path="/" component={  Auth (LandingPage, option, adminRoute)  } />