chain 함수 수정

Author: dongoc

packages/react-contexts/src/middlewares/chain.ts

@@ -1,28 +1,19 @@
-import { NextResponse } from 'next/server'
-import type { NextFetchEvent, NextRequest } from 'next/server'
+import { NextMiddleware, NextResponse } from 'next/server'
 
-import { CustomMiddleware, MiddlewareFactory } from './types'
+import { MiddlewareFactory } from './types'
 
-/**
- * TF 14.0.11의 middlewares/src/chain 참고하여 작성
- * https://github.com/titicacadev/triple-frontend/blob/ceee9a7116dfbf39cc1363013a43cfb0060a9539/packages/middlewares/src/chain.ts
- */
 export function chain(
   functions: MiddlewareFactory[],
   index = 0,
-): CustomMiddleware {
+): NextMiddleware {
   const current = functions[index]
 
   if (current) {
     const next = chain(functions, index + 1)
     return current(next)
   }
 
-  return (
-    request: NextRequest,
-    event: NextFetchEvent,
-    response: NextResponse,
-  ) => {
-    return response
+  return () => {
+    return NextResponse.next()
   }
 }

packages/react-contexts/src/middlewares/index.ts

@@ -1,10 +1,11 @@
 import { chain } from './chain'
 import type { MiddlewareFactory } from './types'
 import { refreshSessionMiddleware } from './refresh-session'
+import { setWebDeviceIdMiddleware } from './set-web-device-id'
 
 export { oldTripleIosCookiesMiddleware } from './old-triple-ios-cookie'
 
 export const constructMiddleware = (functions: MiddlewareFactory[]) =>
-  chain([...functions, refreshSessionMiddleware])
+  chain([...functions, refreshSessionMiddleware, setWebDeviceIdMiddleware])
 
 export * from './types'

packages/react-contexts/src/middlewares/old-triple-ios-cookie.ts

@@ -1,19 +1,23 @@
-import { NextRequest, NextResponse, NextFetchEvent } from 'next/server'
+import {
+  NextRequest,
+  NextResponse,
+  NextFetchEvent,
+  NextMiddleware,
+} from 'next/server'
 import satisfies from 'semver/functions/satisfies'
 
 import { parseApp } from '../user-agent-context'
 
-import { CustomMiddleware } from './types'
-
 /**
  * TF 13.42.1의 react-contexts/src/middleware 참고하여 작성
  * https://github.com/titicacadev/triple-frontend/blob/8d002e80f9ff187d6a06b6a2695c48f1d5383662/packages/react-contexts/src/middleware.ts
  */
-export function oldTripleIosCookiesMiddleware(
-  customMiddleware: CustomMiddleware,
-) {
-  return function middleware(request: NextRequest, event: NextFetchEvent) {
-    const response = NextResponse.next()
+export function oldTripleIosCookiesMiddleware(next: NextMiddleware) {
+  return async function middleware(
+    request: NextRequest,
+    event: NextFetchEvent,
+  ) {
+    const response = (await next(request, event)) as NextResponse
 
     const userAgent = request.headers.get('User-Agent')
 
@@ -22,7 +26,7 @@ export function oldTripleIosCookiesMiddleware(
     const tripleApp = userAgent ? parseApp(userAgent) : null
 
     if (!userAgent || (host && !!tripleApp)) {
-      return customMiddleware(request, event, response)
+      return response
     }
 
     try {
@@ -45,6 +49,6 @@ export function oldTripleIosCookiesMiddleware(
       // semver 파싱 에러가 발생하면 ignore 합니다.
     }
 
-    return customMiddleware(request, event, response)
+    return response
   }
 }

packages/react-contexts/src/middlewares/refresh-session.ts

@@ -1,20 +1,25 @@
-import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'
+import {
+  NextFetchEvent,
+  NextMiddleware,
+  NextRequest,
+  NextResponse,
+} from 'next/server'
 import { get, post } from '@titicaca/fetcher'
 import { parseString, splitCookiesString } from 'set-cookie-parser'
 
-import { CustomMiddleware } from './types'
 import { TP_SE, TP_TK } from './constants'
 
-export function refreshSessionMiddleware(customMiddleware: CustomMiddleware) {
+export function refreshSessionMiddleware(next: NextMiddleware) {
   return async function middleware(
     request: NextRequest,
     event: NextFetchEvent,
   ) {
+    const response = (await next(request, event)) as NextResponse
     const url = request.nextUrl
 
     const isPageUrl = url.pathname.match('^/((?!(api|static|.*\\..*|_next)).*)')
     if (!isPageUrl) {
-      return customMiddleware(request, event, NextResponse.next())
+      return response
     }
 
     const allCookies = request.cookies.getAll()
@@ -25,7 +30,7 @@ export function refreshSessionMiddleware(customMiddleware: CustomMiddleware) {
     const cookies = deriveAllCookies(request.cookies.getAll())
 
     if (!isSessionExisted) {
-      return customMiddleware(request, event, NextResponse.next())
+      return response
     }
 
     const options = {
@@ -36,7 +41,7 @@ export function refreshSessionMiddleware(customMiddleware: CustomMiddleware) {
     const firstTrialResponse = await get('/api/users/me', options)
 
     if (firstTrialResponse.status !== 401) {
-      return customMiddleware(request, event, NextResponse.next())
+      return response
     }
 
     /**
@@ -73,10 +78,10 @@ export function refreshSessionMiddleware(customMiddleware: CustomMiddleware) {
 
         response.headers.set('set-cookie', setCookie)
 
-        return customMiddleware(request, event, response)
+        return response
       }
     }
-    return customMiddleware(request, event, NextResponse.next())
+    return response
   }
 }
 

packages/react-contexts/src/middlewares/set-web-device-id.ts

@@ -1,30 +1,36 @@
-import { randomUUID } from 'crypto'
+import {
+  NextFetchEvent,
+  NextMiddleware,
+  NextRequest,
+  NextResponse,
+} from 'next/server'
+import { v4 as uuidV4 } from 'uuid'
 
-import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'
-
-import { CustomMiddleware } from './types'
 import { getTripleApp } from './utils/get-triple-app'
 import { X_TRIPLE_WEB_DEVICE_ID } from './constants'
 
-export function setWebDeviceIdMiddleware(customMiddleware: CustomMiddleware) {
-  return function middleware(request: NextRequest, event: NextFetchEvent) {
-    const response = NextResponse.next()
+export function setWebDeviceIdMiddleware(next: NextMiddleware) {
+  return async function middleware(
+    request: NextRequest,
+    event: NextFetchEvent,
+  ) {
+    const response = (await next(request, event)) as NextResponse
     const tripleApp = getTripleApp(request)
 
     if (tripleApp) {
-      return customMiddleware(request, event, response)
+      return response
     }
 
     const allCookies = request.cookies.getAll()
     const hasWebDeviceId = allCookies.some(
       ({ name }) => name === X_TRIPLE_WEB_DEVICE_ID,
     )
 
-    if (!hasWebDeviceId) {
-      const randomWebDeviceId = randomUUID()
+    if (!hasWebDeviceId && response?.cookies) {
+      const randomWebDeviceId = uuidV4()
       response.cookies.set(X_TRIPLE_WEB_DEVICE_ID, randomWebDeviceId)
     }
 
-    return customMiddleware(request, event, response)
+    return response
   }
 }

packages/react-contexts/src/middlewares/types.ts

@@ -1,12 +1,3 @@
-import { NextMiddlewareResult } from 'next/dist/server/web/types'
-import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'
+import { NextMiddleware } from 'next/server'
 
-export type CustomMiddleware = (
-  request: NextRequest,
-  event: NextFetchEvent,
-  response: NextResponse,
-) => NextMiddlewareResult | Promise<NextMiddlewareResult>
-
-export type MiddlewareFactory = (
-  middleware: CustomMiddleware,
-) => CustomMiddleware
+export type MiddlewareFactory = (middleware: NextMiddleware) => NextMiddleware