HOC을 이용해 유저의 상태 정보에 따른 페이지 접근 권한을 설정

페이지 종류

---

• 아무나 진입 가능한 페이지
  • Landing Page
  • About Page
• 로그인한 회원만 진입 가능한 페이지
  • Detail Page
• 로그인 한 회원은 진입 못하는 페이지
  • Register Page
  • Login Page
• 관리자만 진입 가능한 페이지
  • Admin Page

HOC

---

다른 컴포넌트를 받고 새로운 컴포넌트를 리턴

서버에 요청을 전송하고, 해당 페이지에 접속해 있는 유저의 상태정보를 받아옴. 상태 정보에 따라서 유저가 해당 페이지에 접근할 수 있는 권한을 가지고 있는지 체크한 후 페이지 연결

HOC exam

const EnhanceedComponent= higherOrderComponent(WrappedComponent);

구현

---

hoc폴더 아래 auth.js파일 생성

auth.js

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

export default function(SpecificComponent,option,adminRoute=null){ //default= null
    //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
}

type.js

//생략
export const AUTH_USER="auth_user"; //추가

user_action.js

//생략
//추가
export function auth(){
    const request=axios.get('/api/users/auth')
        .then(response=>response.data)
    //reducer에 넘겨줌
    return{
        type:AUTH_USER,
        payload:request
    }
} 

user_reducer.js

//생략
//케이스 추가
case AUTH_USER:
            return {...state,userData:action.payload}
            break;

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>

참고

www.inflearn.com/course/따라하며-배우는-노드-리액트-기본