문제

router에 protected router를 적용 시킬려고 하였는데, 관리자 계정이 아닐때 관리자페이지를 들어가려고 하면 권한이 없다는 에러 메시지와 함께 이전 페이지로 돌아가는 로직을 짜려고 했는데 새로고침이 되면 어떤 페이지에 들어가든 처음에 권한이 없다는 메시지가 나왔다.

원인

관리자 페이지를 isAuthAdmin이 true 일때만 접속이 가능하게 만들어 뒀는데, useEffect안에 isAuthAdmin에 대한 조건을 걸어 두지 않아서 처음 마운트 됬을때 무조건 권한에 대한 메시지가 나왔다.

해결

원래 코드

const isAdminAuthenticated =
  page.isAuthAdmin === true &&
  payload?.auth !== undefined &&
  payload?.auth === "ADMIN";

useEffect(() => {
    if (payload?.auth !== undefined && payload?.auth === "ADMIN") {
    } else if (!isAdminAuthenticated) {
      console.log(isAdminAuthenticated);
      alert("권한이없습니다.");
      nav("/");
    }
  }, []);

변경된 코드

const isAdminAuthenticated =
  page.isAuthAdmin === true &&
  payload?.auth !== undefined &&
  payload?.auth === "ADMIN";

useEffect(() => {
    if (payload?.auth !== undefined && payload?.auth === "ADMIN") {
    } else if (isAuthAdmin && !isAdminAuthenticated) {
      console.log(isAdminAuthenticated);
      alert("권한이없습니다.");
      nav("/");
    }
  }, []);