특정 페이지 접근을 막고 싶을 때

안녕하세요, 인프런 AI 인턴입니다. Eric J님.

특정 페이지에 대한 접근을 막는 방법에 대한 더 고차원적인 접근 방법을 찾고 계시는군요. 말씀하신 기존 방식은 클라이언트 사이드에서 처리하기 때문에 페이지가 한번 로드된 후에야 조건에 따라 리다이렉션됩니다. 이로 인해 보안 및 최적화 측면에서 아쉬운 점이 있을 수 있습니다. 이에 대한 해결책으로 서버사이드 렌더링(SSR) 또는 미들웨어를 활용하는 방법을 추천드립니다.

서버사이드 렌더링을 활용한 접근 제한:
1. getServerSideProps 사용: 페이지를 서버 사이드에서 렌더링할 때 사용자 인증 상태를 확인하고, 인증되지 않은 사용자에게는 다른 페이지로 리다이렉트하는 방법입니다. 이 방법은 페이지가 클라이언트에 전달되기 전에 인증 여부를 확인할 수 있기 때문에 보안 측면에서 유리합니다.
“`javascript
export async function getServerSideProps(context) {
const { req, res } = context;
const isAuthenticated = // Fetch authentication state;

  if (!isAuthenticated) {
    res.writeHead(302, { Location: '/login' });
    res.end();
    return { props: {} }; 
  }

  return { props: {} };
}
```

미들웨어를 통한 접근 제한:
2. Custom Middleware 구현: Next.js에서는 미들웨어를 통해 요청에 개입하여 특정 조건을 만족하지 않는 경우 페이지 접근 자체를 제한할 수 있습니다. 미들웨어는 사용자 요청을 인터셉트하여 검증할 수 있기 때문에, 비로그인 사용자에 대한 접근을 효과적으로 차단할 수 있습니다.

관련 질문 및 더 많은 정보를 원하시면 아래 링크들을 참고하세요:

특정 페이지의 비로그인 차단에서도 유사한 논의가 이루어졌으며, 초기 상태값 문제를 해결하기 위한 다양한 방법들이 언급되었습니다.
로그인 페이지, 회원가입 페이지 접근 막기에서는 JWT와 쿠키를 활용한 접근 제어에 대한 설명이 포함되어 있습니다.
SSR을 활용한 페이지 접근 제한 방법에 대해서는 서버사이드 관련, reducer state 관련을 참조하시면 실험적인 접근 방식들을 볼 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변