권한 분기

권한 분기

• 사용자에 따라 보여주는 페이지가 다르다.
• 이를 위해 권한에 분기를 주는 컴포넌트를 만들고 이를 이용해 사용자에 권한에 따라 보여주는 페이지를 다르게 주는 것을 권한 분기라고 한다.

export const WithAuth = (Component: any) => (props: any) => {
  const router = useRouter();

  useEffect(() => {
    if (!localStorage.getItem("accessToken")) {
      Modal.error({
        content: "로그인 후 이용 가능합니다.",
        onOk() {
          router.push("/23-04-login-check");
        },
      });
    }
  }, []);
  return <Component {...props} />;
};

• useEffect 안에서 accessToken 이 있는지 확인하는 컴포넌트.

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

function LoginSuccessPage() {
  const { data } = useQuery(FETCH_USER_LOGGED_IN);
  
  return <div>{data?.fetchUserLoggedIn.name}님 환영합니다.</div>;
}

export default WithAuth(LoginSuccessPage);

• 마지막 줄에서 LoginSuccessPage 를 WithAuth 로 감싸주어 권한체크를 진행한다.
• 이렇게 HOC 방식을 사용하면 재사용성을 높여 편리하게 사용할 수 있다.