비 로그인 유저가 유저 전용페이지에 url을 통해 접근 시 막기(Next.js 프로젝트)

소셜 로그인을 구현한 후에 로그인 유무에 따라 사용자가 볼 수 있는 페이지, 볼 수 없는 페이지를 구분하는 작업을 진행하기로 했다. 로그인 Modal Redner 제작, 비 로그인 유저 url 접근 금지 작업이 있었고 오늘은 비 로그인 유저 url 접근 금지 작업을 왜 진행했고 어떻게 작업했는지 포스팅하려고 한다!

📌 작업을 한 이유

• 개발자가 아닌 일반 사용자가 생각하기에도 로그인 유저 전용 페이지에 비 로그인 유저가 접근할 수 있다고 한다면 웹 사이트의 품질이나 신뢰성에 의구심을 품을 것이다. 그 결과로 해당 웹 사이트를 사용하지 않는 확률이 매우 높을 것이다.
• 이런 문제는 UX의 악영향을 줄 수 있다고 생각해서 해당작업 진행하기로 했다.
• 비 로그인 유저가 독서 기록 페이지(유저 전용 페이지)에 접근

📌 접근 금지 컴포넌트 만들기

import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';

import { isAuthorizedSelector } from '@/recoil/auth';

interface AuthRequiredPageProps {
  children: React.ReactNode;
}

const AuthRequiredPage = ({ children }: AuthRequiredPageProps) => {
  const isAuthorized = useRecoilValue(isAuthorizedSelector);
  const router = useRouter();

  useEffect(() => {
    if (!isAuthorized) router.push('/');
  }, [isAuthorized, router]);

  return <>{children}</>;
};

export default AuthRequiredPage;

• const isAuthorized = useRecoilValue(isAuthorizedSelector); => 로그인 여부 데이터(boolean)를 isAuthorized에 할당
• if (!isAuthorized) router.push('/'); => 비 로그인 상태라면 홈으로 Redirect
• return <>{children}</>; => 비 로그인 유저가 접근 하면 안되는 컴포넌트를 해당 컴포넌트의 하위 컴포넌트로 설정

📌 컴포넌트 설정

• 적용하려는 컴포넌트의 상위 컴포넌트로 설정하면 끝이다!

import AuthRequiredPage from '../auth/AuthRequiredPage';

...

 return (
    <AuthRequiredPage>
      기존 컴포넌트
    </AuthRequiredPage>

📌 적용 결과

• 비 로그인 유저가 url을 통해 독서 기록 페이지로 접근 시 메인으로 Redirect 되는 것을 확인할 수 있다!

📌 보완점

• 유저 전용 페이지에서 data fetch가 필요 없는 부분에서는 정상적으로 동작하는데 fetch가 필요한 곳에서 문제점이 있다.
• 후속조치를 하지 않았을 때 메인으로 Redirect 되지않고 그 페이지에 계속 머무르게 된다. 이러한 현상은 UX 악영향을 줄 수 있다고 생각하기 때문에 해당 부분을 보완해야할 것 같다.

📌 결론

• 유저 전용 페이지를 선별하는 것부터 해서 사용자 입장에서 해당 작업을 진행하다보니 고려해야 할 것이 많았다. 사용자가 웹 사이트를 사용함에 있어 셀 수 없는 여러가지 상황이 있다보니 모든 것을 다 대비하기는 힘들다. 하지만 사용자 입장에서 미리 예측해서 조치를 하는 것이 UX 향상에 지름길이라 생각하기 때문에 항상 인지하면서 개발을 해야할 것 같다!