[코드캠프 5주차]권한 분기

[권한분기란?]

권한 분기란 말 그대로 권한에 따라서 화면을 렌더링 해주는 페이지를 분기 한다는 뜻이다.
로그인페이지를 구현했다면 생각해야 하는것이 관리자 권한을 가진 사람은 어떤 페이지를 보여줘야 하는지, 허용된 페이지가 아니라면 어떻게 처리해줘야 하는지를 생각해야 한다.
작게는 비회원, 회원
크게는 비회원, 구매자, 판매자, 관리자 등등 여러가지의 회원 유형이 있을수 있고 해당 회원마다 볼수있는 페이지의 권한이 모두 달라야 한다.

이러한 권한에 따른 페이지 보여주기 및 권한이 없을때 처리해주는 과정이 바로 권한분기 이다.

권한 분기를 위해서는 해당 유저가 어떠한 정보를 가지고 있는지 확인 하기 위해서 토근 값을 이용하여 권한 분기를 할 수 있다.

const withAuth = (Component) => (props) => {
  const router = useRouter();
  const { accessToken } = useRecoilState(accessTokenState);
  useEffect(() => {
    if (!accessToken) router.push("/login");
  }, []);
  if (!accessToken) return <></>;
  return <Component {...props} />;
};
export default withAuth;

권한 분기를 위해서 권한을 분리하기 위한 페이지에 useEffect 로 제일 처음 렌더링 할때 분기 처리를 한다면 다른 페이지 에서도 useEffect로 전부다 토큰 값에 따른 권한을 주어야 하지만, withAuth 라는 HOC(고차 컴포넌트)를 사용하여 좀 더 쉽게 분기 처리를 할 수 있다.