Next.js에서 페이지 접근 권한 설정하기

먼저 관리자 페이지는 기간이 늘어짐에따라 기능 추가를 중단한 녀석이기 때문에... 미처 고려하지 못했던 페이지 접근 권한을 이제야 설정했다. 역시 기획은 아무리 꼼꼼하게 해도 어딘가 놓친 부분이 있다는 걸 다시 한번 느꼈다...

 

관리자 페이지 접근 권한 설정은 Cookie와 Next.js의 middlware로 해결했다.

https://nextjs.org/docs/app/building-your-application/routing/middleware

Routing: Middleware | Next.js

 

• 폴더구조에 따라 middleware.ts의 위치도 중요하다.
  (원래 app 폴더 안에 넣어두었다가 제대로 작동이 안해서 src 레벨로 옮기니 잘 작동했다.)

폴더구조에 따른 middleware.ts 위치

 

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';

import { ADMIN_USER_ID } from '@/constants/values';

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|fonts|images).*)'],
};

const protectedPage = ['/admin'];

export function middleware(request: NextRequest) {
  const userId = String(request.cookies.get('userId')?.value);
  const currentPath = request.nextUrl.pathname;

  if (userId !== ADMIN_USER_ID && protectedPage.includes(currentPath)) {
    const url = request.nextUrl.clone();
    url.pathname = '/';

    return NextResponse.redirect(url);
  }
}

• next.js의 middleware를 사용하려면 cookie에서 가져온 값을 사용해야만 해서 로그인 시 받아오는 userId를 cookie에 저장하여 구현했다.
• 처음에 cookies-next 라이브러리랑 middleware.ts랑 호환(?)이 잘 안되는 것 같았다. 하지만 파일 위치를 옮기고 나서 잘 작동하는 걸 보니 middleware.ts의 위치가 문제였을거란 생각이 들지만 따로 테스트 해봐야겠다.

 

🚑 발견한 에러 🚑

- 이메일 인증 코드가 2개로 나오는 이슈 ➡️ 처음 리팩토링 시 API 호출을 두 번 보내는 코드로 짰...다... 해결!!

- 관리자 페이지 문의 목록에서 게스트가 보낸 문의 채팅이라면 메일 전송 막기