2024.04.15 TIL #Next.js #middleware #multiple_middleware #chain #라우트보호 #인가

📌 Task TODOLIST

- [x] middleware 를 통한 라우트 보호

- [x] 여러 라우트 보호가 필요하기 때문에 chain 만들기

---

✨ 개발 내용

Why(이유) ?

컴포넌트 단에서 라우트 보호를 할 지(ex. (auth) / (nonAuth) 로 폴더를 나누어서),

middleware에서 라우트 보호를 할 지 팀원들이랑 상의를 했는데 미들웨어가 당첨됐다.

이유는

1. 일단 각 컴포넌트에서 써야 할 보일러 플레이트가 줄어든다!

권한이 없으면 router.push를 해주어야 한다든지, 

alert("로그인 후 이용가능 합니다") 등의 alert를 매 컴포넌트들에서 마다 처리를 해줘야 하는 것을

미들웨어에서 아예 접근하지 못하게 처리하기로 했다.

 

2. 이번 기회로 middleware를 제대로 활용해보고 싶었다.

 

How(과정)  && what(결과) 

  (1) 어떤 조건으로 각 라우트를 보호할지 결정한다.

  우리 팀은 총 5개의 미들웨어가 필요했다.

  <세션 업데이트 / 로그인 여부 / 내가 참여중인 미팅방만 / 내가 참여중인 채팅방만 / 학교인증 여부>

  에 따라서 라우트 보호가 필요했다.

// 세션 업데이트
export const updateSessionMiddleware = (middleware: CustomMiddleware) => {
  return async (request: NextRequest, event: NextFetchEvent) => {
    await updateSession(request);
    return middleware(request, event, NextResponse.next());
  };
};

// 로그인 여부
export const routeHandlerMiddleware = (middleware: CustomMiddleware) => {
  return async (request: NextRequest, event: NextFetchEvent, response: NextResponse) => {
    const supabase = serverSupabase();
    const { data } = await supabase.auth.getUser();

    if (data.user) {
      // 로그인 한 유저
      if (request.nextUrl.pathname.startsWith('/login')) {
        return NextResponse.redirect(new URL('/', request.nextUrl.origin));
      } else if (request.nextUrl.pathname.startsWith('/join')) {
        return NextResponse.redirect(new URL('/', request.nextUrl.origin));
      }
    } else {
      // 로그인 안한 유저
      if (request.nextUrl.pathname.startsWith('/mypage')) {
        // 마이페이지 접근 방지 + 로그인 페이지로 redirect
        return NextResponse.redirect(new URL('/login', request.url));
      } else if (request.nextUrl.pathname.startsWith('/meetingRoom') || request.nextUrl.pathname.startsWith('/chat/')) {
        // 로비로 접근 불가
        return NextResponse.redirect(new URL('/login', request.url));
      }
    }
    return middleware(request, event, response);
  };
};

export const chatRoomHandler = (middleware: CustomMiddleware) => {
  return async (request: NextRequest, event: NextFetchEvent, response: NextResponse) => {
    // 채팅창
    if (request.nextUrl.pathname.startsWith('/chat/')) {
      const supabase = serverSupabase();
      const {
        data: { user }
      } = await supabase.auth.getUser();
      // 내가 들어가있는 방들
      const myChatRooms = [];
      const { data: myRooms } = await supabase
        .from('participants')
        .select('room_id')
        .eq('user_id', String(user?.id))
        .eq('isDeleted', false);

      if (myRooms) {
        for (let room of myRooms) {
          const { data: myChatRoomId } = await supabase
            .from('chatting_room')
            .select('chatting_room_id')
            .eq('room_id', room.room_id)
            .eq('isActive', true);
          if (myChatRoomId && myChatRoomId.length) {
            myChatRooms.push(myChatRoomId[0].chatting_room_id);
          }
        }
        if (myChatRooms.includes(request.nextUrl.pathname.replace('/chat/', ''))) {
          // 내가 들어가있는 방이면 OK
          return NextResponse.next();
        } else {
          // 내가 들어가있는 방이 아니면 로비로
          return NextResponse.redirect(new URL('/meetingRoom', request.nextUrl.origin));
        }
      }
    }

    return middleware(request, event, NextResponse.next());
  };
};

export const meetingRoomHandler = (middleware: CustomMiddleware) => {
  return async (request: NextRequest, event: NextFetchEvent, response: NextResponse) => {
    // 수락창
    if (request.nextUrl.pathname.startsWith('/meetingRoom/')) {
      const supabase = serverSupabase();
      const {
        data: { user }
      } = await supabase.auth.getUser();
      // 내가 들어가있는 방들
      const { data: myRooms } = await supabase
        .from('participants')
        .select('room_id')
        .eq('user_id', String(user?.id))
        .eq('isDeleted', false);
      if (
        myRooms &&
        myRooms.map((room) => room.room_id).includes(request.nextUrl.pathname.replace('/meetingRoom/', ''))
      ) {
        return NextResponse.next();
      } else {
        return NextResponse.redirect(new URL('/', request.nextUrl.origin));
      }
    }

    return middleware(request, event, NextResponse.next());
  };
};

// 학교인증여부
export const schoolValidateMiddleware = (middleware: CustomMiddleware) => {
  return async (request: NextRequest, event: NextFetchEvent, response: NextResponse) => {
    if (request.nextUrl.pathname.startsWith('/meetingRoom')) {
      const supabase = serverSupabase();
      const { data } = await supabase.auth.getUser();
      const { data: isValidate } = await supabase
        .from('users')
        .select('isValidate')
        .eq('user_id', data.user?.id as string);

      if (isValidate && !isValidate[0].isValidate) {
        return NextResponse.redirect(new URL('/mypage', request.url));
      }
    }
    return middleware(request, event, NextResponse.next());
  };
};

 

(2) 미들웨어 종류가 5개 이니 하나의 middleware.ts 파일에 우겨넣기 보다는 multiple middleware를 chain을 통해 재귀함수로 만들어본다.

// chain.ts
import { NextFetchEvent, NextRequest, NextResponse } from 'next/server';
import { CustomMiddleware } from './middlewareType';

type MiddlewareFactory = (middleware: CustomMiddleware) => CustomMiddleware;

export const chain = (functions: MiddlewareFactory[], index = 0): CustomMiddleware => {
  const current = functions[index];

  if (current) {
    const next = chain(functions, index + 1);
    return current(next);
    // current(chain(functions, 1)) => current(current(chain(functions,2))) => current(current(chain(functions,3)))
    // 이런 식으로 chain이 형성되고, 재귀함수 실행
  }

  // 마지막 순서일 때
  return async (request: NextRequest, event: NextFetchEvent, response: NextResponse) => {
    return response;
  };
};

 

(3) middleware.ts에서 하나의 chain으로 엮어준다.

// src > middleware.ts
const middlewareList = [
  updateSessionMiddleware,
  routeHandlerMiddleware,
  schoolValidateMiddleware,
  meetingRoomHandler,
  chatRoomHandler
];

export default chain(middlewareList);

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)']
};

 

🚨  TroubleShotting  && 📸 스크린샷

원래 학교인증여부 middleware는 학교인증여부를 다음 미들웨어에 header에 boolean 값을 심고,	다음 미들웨어에서 심어진 헤더에서 get 해서 라우트 보호를 하려고 했다.

 

근데 받는 미들웨어에서 get이 안 되는 것이다..!!

근데 버그인 거 같다..

왜 버그라 하냐면, chain으로 엮지 않고 일반 middleware로 하면 header가 잘 get 된다.
하지만 chain만 엮으면 header가 없어지는...Bug....

찾아보니 다른 사람들도 middleware 체인에서 header에 심은 것을 다음 미들웨어에서 확인할 수 없다는 글들이 많았다.

https://github.com/traefik/traefik/issues/5890

v2: chain middleware removes headers added by headers middleware · Issue #5890 · traefik/traefik

=> 하여 header에 심는 방법은 pass!

바로 리디렉션을 시켜줘버렸다.

📚 레퍼런스

https://www.youtube.com/watch?v=fmFYH_Xu3d0&list=PL1lHTvxfWQGoJ6IornrxP0rwUV8m_iluA&index=2

https://medium.com/@aididalam/approach-to-multiple-middleware-and-auth-guard-in-next-js-app-routing-bbb641401477

Approach to Multiple Middleware and Auth Guard in Next.js App Routing

https://github.com/Team-MeetGo/MeetGO/pull/86

황인정 - [feat]: 미들웨어(채팅창 접근권한 설정) by 2njeong · Pull Request #86 · Team-MeetGo/MeetGO

https://github.com/Team-MeetGo/MeetGO/pull/127

황인정 - [fix]: 미들웨어(채팅창) by 2njeong · Pull Request #127 · Team-MeetGo/MeetGO