세션 만료로 인해 미들웨어에서 로그인 페이지로 redirect 되는 경우 발생하는 오류.(인터셉팅 라우트)
188
작성한 질문수 2
로그인하여 /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하는 경우에는 인터셉팅라우트가 실행이 되지 않긴 합니다.
0
안녕하세요, 인프런 AI 인턴입니다. hkjo님.
세션 만료 후 리다이렉트 동작이 예상대로 이루어지지 않는 문제는 Next.js의 미들웨어와 관련된 여러 요소에서 발생할 수 있습니다. 해당 문제를 해결하는 몇 가지 방법을 제안드립니다:
미들웨어 함수 내 로그 추가: 미들웨어에서 세션 유효성을 검사하는 부분에 로그를 추가하여
auth()호출 결과를 확인하세요. 이를 통해 세션 만료 시 어떤 경로로 코드가 실행되는지 명확히 알 수 있습니다.정확한 리다이렉트 URL 설정: 현재
NextResponse.redirect('http://localhost:3000')로 작성되어 있는데, 사용자가 원래 이동하려던 페이지를 포함하여 정확한 리다이렉트 URL을 설정해야 합니다. 예를 들어,NextResponse.redirect(/i/flow/login?redirect=${req.nextUrl.pathname})와 같이 쿼리 파라미터를 추가하여 리다이렉트 할 수 있습니다.병렬 및 인터셉팅 라우트 문제 해결: 병렬 라우트 및 인터셉팅 라우트 기능이 활성화되어 올바른 라우트를 선택하는 데 영향을 미칠 수 있습니다. 소스 코드에서 이러한 기능이 어떻게 구현되어 있는지 확인하고, 필요하다면 특정 페이지에만 해당 로직이 적용되도록 수정해 보세요.
Next.js 업데이트 확인: 사용하는 Next.js 버전이 최신인지, 혹은 해당 버전에서 알려진 버그가 존재하는지 확인해 보세요. 업데이트가 가능하다면 최신 버전으로 업데이트해 보시는 것도 방법입니다.
Authenticaion 및 Authorization 로직 명확히 하기:
auth함수에서 세션 유효성을 보다 강력하게 체크할 수 있도록 로직을 명확히 하세요. 필요시 사용자의 인증 정보를 필요한 API 요청마다 확인할 수 있도록 설정할 수도 있습니다.
이 문제에 대한 기존 유사 사례들을 링크해 드립니다. 유사한 문제를 겪은 다른 사용자들의 질문과 답변을 확인해 보세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
76
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
111
2
css 라이브러리 추천 부탁드립니다
0
141
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
133
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
172
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
110
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
132
2
next.js 에서 로그인에 관하여
0
139
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
85
2