[Next]미들 웨어 session 찾지 못하는 에러

프로젝트의 마무리 단계로 로그인을 해야만 하는 페이지를 middleware로 로그인 유무를 확인해서 로그인이 되어있지 않으면 로그인페이지로 넘어가게 만들었다. 하지만 미들웨어를 통해 들어간 페이지로 로그인이 됬을 시 그 페이지만 온전하게 들어가지고 다른 미들웨어로 걸려야되는 페이지에서는 다시 로그인페이지가 나오는 오류가 생겼다.

• 로그인이 되어있지 않을 시 새 글 게시 혹은 내가 쓴 글 보기를 누르면 로그인페이지로 넘어감.
• 만약 새 글 게시페이지에서 로그인을 진행 하였다면 다시 새 글 게시버튼을 눌렀을때는 페이지에 잘 들어가 지지만 내가 쓴 글 보기를 눌르면 로그인 페이지로 넘거감.
• 어느 한 페이지에서라도 로그인이 됬다면 온전히 로그인 세션을 찾아줘야하는데 그렇지 않음.
• 어느 한 페이지에서 로그인을 하고 새로고침을 하면 둘 페이지 다 들어가 짐.

middleware.ts

import { NextRequest, NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

export async function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith("/write") || request.nextUrl.pathname.startsWith("/mypost")) {
  
    const session = await getToken({ req: request });
    console.log("세션", session);
    if (session === null) {
      return NextResponse.redirect(new URL("/api/auth/signin", request.url));
    }
  }
}

유저가 /write, /mypost 페이지로 들어왔을때 seeion유무를 판별해 로그인 유무를 판별 하였다. "/api/auth/signin"부분은 /login으로 해도 상관 없었지만 NextAuth 라이브러를 이용해 로그인 페이지로 다시 라우팅 되게 해뒀기 때문에 크게 이상은 없었다.

여러 시도를 해보던 중 새로고침을 했을 시 두 페이지 다 온전하게 들어가 진다는것에 초첨을 두고 해결하려고 했다.

Login.tsx

const handleLogin = async () => {
    const result = await signIn("credentials", {
      email: loginInfo.email,
      password: loginInfo.password,
      redirect: false,
    });
   
    if (result?.status !== 200) {
      return alert("메일 혹은 패스워드를 확인 바랍니다.");
    }
    return router.push("/");
  };

로그인 페이지에서 로그인 버튼을 눌렀을때 실행되는 함수이다. 위의 코드를 보면 status 200를 걸러주고 status 200가 올바르게 온다면 메인 페이지로 라우팅을 해준다. 라우트 기능은 SPA의 특성으로 페이지 전체를 새로고침 하지 않고 빠른 페이지 전환을 가능하게 해준다.

새로고침이 된다면 로그인이 되었을때 다른 로그인이 필요한 페이지도 들어갈 수 있게 될것이란것이 내 생각이었다.

const handleLogin = async () => {
    const result = await signIn("credentials", {
      email: loginInfo.email,
      password: loginInfo.password,
      redirect: false,
    });
    if (result?.status !== 200) {
      return alert("메일 혹은 패스워드를 확인 바랍니다.");
    }
// 변경된 부분
    window.location.href = "/";
  };

window.location.href에 새 URL을 설정하면 페이지가 해당 URL로 이동하면서 전체 페이지가 새로고침이 된다.

위와같이 메인 페이지로 넘어갔을 시 새로고침을 하게 함으로써 두 페이지 다 middleware에서 걸리지 않게 되었다. 하지만 위와같은 방법은 SPA의 장점을 활용하지 목하기 때문에 필요한 경우에만 사용하는 것이 좋을것 같다.

마지막으로 NextAuth 라이브러리를 사용중이라면 middleware코드를 좀 더 간단하게 바꿀 수 있다.

middleware.ts

export { default } from "next-auth/middleware";

// 로그인이 필요한 페이지
export const config = {
  matcher: ["/mypost", "/write"],
};

위와같이 간단하게 로그인이 필요한 페이지만 작성 해주면 된다.