권한 분기하기
권한 분기의 종류
하나의 서비스는 여러개의 사이트(프로젝트[, 도메인])로 이루어져 있다.
서비스에는 유저용 사이트와 관리자 사이트가 별도로 존재한다.
더 많게는 판매자용, 구매자용, 중개자용 등등 여러 관리자 서버가 존재할 수 있다. ex) 쿠팡, 배달의 민족
- 등급 별 권한 분기
- 하나의 서비스가 유저 사이트, 사장님 사이트, 관리자 사이트 등으로 나눠질 수 있다.
- 각각 다른 도메인을 이용한다.
- 백엔드는 공유할 수 있다.
- 로그인 여부로 권한 분기
- 로그인을 한 유저와 로그인하지 않은 유저가 접근할 수 있는 페이지를 나눈다.
- HOC를 활용한다. HOC은 Closure를 바탕으로 만들어졌다.
- 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)라고 한다.
Author And Source
이 문제에 관하여(권한 분기하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@e_juhee/authority저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)