[Next JS] Middleware 이용하여 cookie, token 관리

• Middleware란?
• Middleware 사용사례
• Middleware 설정
• Middleware로 쿠키 관리하기

Middleware란?

미들웨어(Middleware)는 애플리케이션에서 서버에 들어오거나 나가는 req와 res 사이에 실행되는 코드이다. 미들웨어는 주로 req가 서버에서 routing될 때 res를 클라이언트에 보내기 전에 수정하거나 검사하는 데 사용된다. 

Node.js로 서버를 구성할 때에도 정말 자주 쓰이고 서버에 들어오는 모든 요청(request)들을 검사하고 인증할 수 있기 때문에 서버 보안 부분에 있어서도 아주 효율적인 로직이라고 볼 수 있다.

 

Middleware 사용사례

• 봇 탐지 및 접근 제한
• 리다이렉트(rewrite)
• 쿠키(token)를 통한 인증

 

Middleware 설정

 

미들웨어는 함수로 표현하며 Node.js에서는 req, res를 함수의 인자로 가지지만 Next 에서는 다르다. 

Next에서 미들웨어는 request(res)만 인자로 가지며, 요청에 따른 응답으로 NextResponse 객체를 리턴한다. 이 NextResponse에 내가 하고 싶은 작업을 해주면 된다.

 

middleware.js 또는 middleware.ts를 루트에 생성한다.

//Next 공식 웹사이트 Docs

import { NextResponse } from 'next/server'
 
// 함수 안에서 await 함수를 쓰면 async function middleware로 쓸 수 있음
export function middleware(request) {
// request를 받아서 처리한 후 NextResponse 객체 리턴

  return NextResponse.redirect(new URL('/home', request.url))
}
 
// matcher를 지정해줌으로 어느 경로에서 미들웨어를 동작시킬 것인지 정할 수 있음.
export const config = {
  matcher: '/about/:path*',
}

// 여러 경로를 지정해줄 수 있음
export const config = {
  matcher: ['/about/:path*', '/dashboard/:path*'],
}

// 정규표현식으로 경로를 지정해줄 수 있음
// api route, _next/static(정적 파일), _next/image(최적화 이미지 파일), favicon.ico(favicon 파일) 등.
export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

 

 

Middleware로 쿠키 관리하기

간단하게 쿠키에 auth라는 쿠키가 있는지 체크하고 있으면 request를 다음으로 진행시키고, 쿠키가 없으면 login 페이지로 넘어가는 미들웨어를 만들어본다.

import { NextResponse } from 'next/server'
 
export function middleware(request) {
  //  로그인 작업을 한 후 auth라는 키와 임의의 값 'abcd'을 가진 쿠키를 발급했다고 가정.
  //  모든 request의 header에는 쿠키 값이 함께 들어오기 때문에 미들웨어에서 검사할 수 있음
  let cookie = request.cookies.get('auth')
  console.log(cookie) // => { name: 'auth', value: 'abcd', Path: '/' }
  const allCookies = request.cookies.getAll()
  console.log(allCookies) // => [{ name: 'auth', value: 'abcd' }]
 
 
 // auth 쿠키가 없으면 login 페이지로 이동
  if(!request.cookies.has('auth')){
  
  	return NextResponse.redirect('/login')
  }

  // auth 쿠키 존재하면 request api 처리
 return NextResponse.next()
}

 

인스타그램이나 트위터 같은 sns 어플리케이션 같이 로그인 하지 않으면 사용을 못하는 어플리케이션을 만드는데 이용할 수 있는 미들웨어라고 볼 수 있다.

예시는 아주 간단하게 쿠키 검사하는 것을 적어놓은 것이고, 실제로는 쿠키에 로그인 정보를 담아서 관리를 해야하기 때문에 더 복잡해지겠지만 정교하게 사용해야 한다.