권한 분기

우리가 자주 사용하는 웹사이트에서는 권한에 따른 분기가 존재한다.
쿠팡 웹사이트를 예시로 들어보자.

• 쿠팡에 접속하게 되면 비회원일 경우에는 구매할때 비회원 전용 결제 페이지가 나오게 되고, 회원일 경우 회원전용이 나오게 된다.
• 판매자일 경우 판매자에 따른 판매자 전용 페이지가 나오게 될 것이다.
• 만약 내가 구매자인데 판매자 전용 페이지에 들어갈 수 있게 된다면 예상치 못한 일이 생길 수도 있다.
• 이를 방지하기 위해 권한에 분기를 주는 컴포넌트를 만들고 이를 이용해 사용자에 권한에 따라 보여주는 페이지를 다르게 주는 것을 권한 분기라고 한다.

이를 어떻게 사용하는가?

HOC(Higher Order Component)

• 렌더가 되는 컴포넌트를 실행할때 먼저 실행이 되는 컴포넌트이다.
• 이 컴포넌트를 사용하여 권한을 먼저 확인한 후 그에 따른 페이지 컴포넌트로 이동시킨다.
• 이는 자바스크립트의 클로저의 개념에서 확장된 것이다.

자바스크립트의 클로저는 다음 포스팅에 자세하게 다뤄보고,
일단 HOC를 이용한 로그인 유무를 확인해보겠다.

사용법

사용법 또한 크게 어렵지 않다.
먼저 공통 컴포넌트에 HOC 컴포넌트를 만들어준다.

import { useRouter } from "next/router";
import { useEffect } from "react";

// @ts-ignore
const withAuth = (Component) => (props) => {
  const router = useRouter();

  // 권한분기 로직 추가
  useEffect(() => {
    if (!localStorage.getItem("accessToken")) {
      alert("로그인을 먼저 해야함");
      router.push("/logins/login");
    }
  }, []);

  return <Component {...props} />;
};

export default withAuth;

위 코드와 같이 useEffect를 이용하여 렌더가 될때 조건을 걸어 로그인 여부를 확인을 해주는 코드를 작성한다.

import { gql, useQuery } from "@apollo/client";
import withAuth from "../../src/commons/componets/commons/hocs/withAuth";

export const FETCH_USER_LOGGED_IN = gql`
  query fetchUserLoggedIn {
    fetchUserLoggedIn {
      email
      name
    }
  }
`;

function MyPage() {
  const { data } = useQuery(FETCH_USER_LOGGED_IN);
  return (
    <div>
      <div>{data?.fetchUserLoggedIn.name}님 어서오세요</div>
      <div>여기는 마이페이지 입니다.</div>
    </div>
  );
}

export default withAuth(MyPage);

그리고 위와 같이 컴포넌트를 export해줄때 withAuth에 매개변수로 렌더가 되는 컴포넌트를 넣어주게 되면 된다.

이를 실행하게 되면 먼저 withAuth 컴포넌트가 먼저 실행이 되고 로그인 여부를 검증을 하게 된후 로그인 토큰이 있다면 들어갈 수 있게 되고 없다면 조건에 걸려 강제로 로그인 페이지로 들어가게 된다.