middleware를 통한 분기처리를 하려고 합니다.

[baegyeong]

#8 이슈에 따라 redirect 대신 middleware로 바꾸고 있습니다.
루트 디렉토리 위치에 middleware.ts를 추가하여 아래와 같은 코드를 추가했고, accessToken과 refreshToken의 여부에 따라 로그인 페이지로 채가는 작업을 하고 있습니다.

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { localStorage } from "@/src/functions/localstorage";

export function middleware(request: NextRequest) {
  const isLogin =
    localStorage.get("accessToken", "") === "" ||
    localStorage.get("refreshToken", "") === "";

  if (isLogin) {
    return NextResponse.redirect(new URL("/signin", request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: [
    "/",
    "/admin/:path*",
    "/applicant/:path*",
    "/interview/:path*",
    "/kanban/:path*",
  ],
};

문제는.. isLogin이 첫 로딩 시에 설정되면 로그인을 해도 isLogin의 값은 그대로입니다.(처음 로그아웃 상태에서 isLogin이 true라면 -> 로그인을 완료했어도 isLogin이 true)
따라서 로그인 후에도 signin 화면에 머물러 있습니다.

해결할 수 있는 좋은 방법이 있는지 여쭤보고 싶습니다.. 감사합니다.

관련 공식문서

[2yunseong]

mather에 signin이 없어서, middleware가 실행이 되지 않는 것 같아요.
signin에서만 특수하게 로그인 성공 시 redirect를 시켜주면 어떨까요?

[2yunseong]

로그인 성공 이후에 signin 컴포넌트 안에서 직접 redirect를 시켜주는 걸 의미하였습니다! middleware를 거치지 않구요.
signin 컴포넌트 내 -> 로그인 성공 시 라우팅

[baegyeong]

본래 구현되어있는 로그인 후 홈으로 리다이렉트 되는 것과 같은 걸까요?

  const onSubmit = async () => {
    if (await signIn(signInData)) {
      navigate.push("/");
      return;
    }
    setError("로그인이 실패했습니다.");
    localStorage.remove("accessToken");
    localStorage.remove("refreshToken");
  };

[2yunseong]

넵 이 코드가 있는데도 그렇게 동작할까요??

[baegyeong]

넵..!!

[2yunseong]

그렇구만유 ㅠ 아쉽

[baegyeong]

middleware의 request에서는 쿠키에도 접근할 수 있어서, 토큰을 쿠키에 저장하는 것도 방법이 될 수 있겠다는 생각이 듭니다. 현재는 로컬스토리지에 값이 저장되도 저장되었다는 것을 인지하지 못하는게 문제라고 생각이 들기 때문입니다..
관련문서

[baegyeong]

찾아보니 middleware 환경에서는 localStorage에 직접 접근할 수 없다고 합니다. 따라서 middleware를 사용하여 redirect하려면 토큰을 쿠키에 저장해야한다고 판단이 드는데 다들 어떻게 생각하시는지 궁금합니다! @loopy-lim @bada308 @geongyu09 @2yunseong

[loopy-lim]

토큰을 쿠키에 저장하면 정말 많은 이점이 있어 너무 좋지만, 이렇게 되면 2가지를 크게 신경써야 한다고 생각합니다.

1. BE에서 body로 보내는 것보다 쿠키로 보내는 정책을 사용해야한다.
2. FE에서 재발급 로직과 로그인로직을 바꾸어야 한다.

참고로 저는 정말로 바꾸고 싶습니다...

[2yunseong]

흠 .. 어렵네요 쿠키로 변경하자는건 백엔드 의견도 들어봐야되는거라 .. 이 부분은 빨리 해결이 안된다면 일단 중지하고 다른 작업부터 들어가는건 어떤가 싶네요. Next middleware를 사용하는 것이 기존의 방법보다 선호되는 장점이 지금 비용을 많이 들이는 것보다 크지 않는다면, 일단은 중지하고 다른 작업부터 해나가는 것도 하나 방법이라고 생각합니다~

[loopy-lim]

그렇다면 먼저 BE와 소통을 한 이후, 비용에 대한 측정을 하여 이 문제를 처리하도록 하겠습니다!