강의

멘토링

커뮤니티

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

hkjo님의 프로필 이미지
hkjo

작성한 질문수

Next + React Query로 SNS 서비스 만들기

백엔드 서버 세팅하기

세션 만료로 인해 미들웨어에서 로그인 페이지로 redirect 되는 경우 발생하는 오류.(인터셉팅 라우트)

작성

·

153

·

수정됨

0

로그인하여 /home에 접속해 있는 도중, 세션이 만료된 상태에서 사용자 정보가 필요한 /message 또는 /explore 등으로 클라이언트 네비게이션을 통해 페이지를 이동하는 경우,
미들웨어의 세션 검사를 거쳐 로그인 페이지로 이동되지 않고 not-found 페이지가 뜨는 오류가 있습니다.

/ / middleware.ts

import { NextResponse } from "next/server";
import { auth } from "./auth";

export { auth } from "./auth";

export async function middleware() {
  const session = await auth();

  if (!session) {
    return NextResponse.redirect(`http://localhost:3000/i/flow/login`);
  }
}

export const config = {
  matcher: ["/compose/tweeet", "/home", "/explore", "/messages", "/search"],
};

로그인 이 후 쿠키를 삭제를 통해 세션을 없애고 클라이언트 네비게이션을 통해 페이지 이동을 하면 미들웨어의 세션 검사에 걸려 redirect가 진행됩니다. /i/flow/login 페이지로 url이 변경되긴 했지만 병렬 라우트 및 인터셉팅 라우트로 인한 간섭이 있어 제대로 된 page를 찾지 못하는 것으로 보이는데 정확한 원인을 알 수 없어 문의 드립니다.

답변 2

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

주소창에는 /i/flow/login으로 나오는데 화면은 404 화면인 상황인가요? 미들웨어에서 redirect하는 경우에는 인터셉팅라우트가 실행이 되지 않긴 합니다.

hkjo님의 프로필 이미지
hkjo
질문자

네 맞습니다. 데모 사이트에서도 동일하게 로그인 한 이 후 쿠키 삭제 후 페이지 이동해봤는데 404 페이지가 뜹니다.

0

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

세션 만료 후 리다이렉트 동작이 예상대로 이루어지지 않는 문제는 Next.js의 미들웨어와 관련된 여러 요소에서 발생할 수 있습니다. 해당 문제를 해결하는 몇 가지 방법을 제안드립니다:

  1. 미들웨어 함수 내 로그 추가: 미들웨어에서 세션 유효성을 검사하는 부분에 로그를 추가하여 auth() 호출 결과를 확인하세요. 이를 통해 세션 만료 시 어떤 경로로 코드가 실행되는지 명확히 알 수 있습니다.

  2. 정확한 리다이렉트 URL 설정: 현재 NextResponse.redirect('http://localhost:3000')로 작성되어 있는데, 사용자가 원래 이동하려던 페이지를 포함하여 정확한 리다이렉트 URL을 설정해야 합니다. 예를 들어, NextResponse.redirect(/i/flow/login?redirect=${req.nextUrl.pathname})와 같이 쿼리 파라미터를 추가하여 리다이렉트 할 수 있습니다.

  3. 병렬 및 인터셉팅 라우트 문제 해결: 병렬 라우트 및 인터셉팅 라우트 기능이 활성화되어 올바른 라우트를 선택하는 데 영향을 미칠 수 있습니다. 소스 코드에서 이러한 기능이 어떻게 구현되어 있는지 확인하고, 필요하다면 특정 페이지에만 해당 로직이 적용되도록 수정해 보세요.

  4. Next.js 업데이트 확인: 사용하는 Next.js 버전이 최신인지, 혹은 해당 버전에서 알려진 버그가 존재하는지 확인해 보세요. 업데이트가 가능하다면 최신 버전으로 업데이트해 보시는 것도 방법입니다.

  5. Authenticaion 및 Authorization 로직 명확히 하기: auth 함수에서 세션 유효성을 보다 강력하게 체크할 수 있도록 로직을 명확히 하세요. 필요시 사용자의 인증 정보를 필요한 API 요청마다 확인할 수 있도록 설정할 수도 있습니다.

이 문제에 대한 기존 유사 사례들을 링크해 드립니다. 유사한 문제를 겪은 다른 사용자들의 질문과 답변을 확인해 보세요:

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

hkjo님의 프로필 이미지
hkjo

작성한 질문수

질문하기