HOC를 이용해 권한 분기하기

권한 분기의 종류

하나의 서비스는 여러개의 사이트(프로젝트[, 도메인])로 이루어져 있다.

서비스에는 유저용 사이트와 관리자 사이트가 별도로 존재한다.
더 많게는 판매자용, 구매자용, 중개자용 등등 여러 관리자 서버가 존재할 수 있다. ex) 쿠팡, 배달의 민족

1. 등급 별 권한 분기

• 하나의 서비스가 유저 사이트, 사장님 사이트, 관리자 사이트 등으로 나눠질 수 있다.
• 각각 다른 도메인을 이용한다.
• 백엔드는 공유할 수 있다.

2. 로그인 여부로 권한 분기

• 로그인을 한 유저와 로그인하지 않은 유저가 접근할 수 있는 페이지를 나눈다.
• HOC를 활용한다. HOC은 Closure를 바탕으로 만들어졌다.(Class형에서는 HOC만 사용할 수 있다. custom-hook은 못쓴다.)
• custom-hook: 함수형 컴포넌트를 이용해서 HOC를 쉽게 사용할 수 있는 방식이다. (이후에 적용해볼 예정)

권한 분기 로직

로그인한 유저만 접근할 수 있는 페이지를 만들어보자!
Local Storage의 accessToken을 꺼내서 없으면 로그인 페이지로 이동시킨다.

Pre-rendering에서 실행되지 않도록 useEffect를 사용하고, localStorage에서 accessToken을 꺼내서 확인한다.

  const router = useRouter();
  const { data } = useQuery(FETCH_USER_LOGGED_IN);

  useEffect(() => {
    if (!localStorage.getItem("accessToken")) {
      alert("로그인 후 이용이 가능합니다.");
      router.push("/23-04-login-check");
    }
  }, []);

👆🏻 이렇게 작성하면 잘 작동은 하지만,, 로그인이 필요한 페이지마다 전부 이 코드를 작성해야 한다는 문제점이 있다....

HOC를 이용하면,
이 코드를 따로 빼서, 로그인이 필요한 페이지에 접근하기 전에 먼저 실행되게 할 수 있다.
먼저 실행되게 하는 컴포넌트를 HOC(Higher Order Component)라고 한다.