addRouteMiddleware

addRouteMiddleware()는 애플리케이션에 미들웨어를 동적으로 추가하는 헬퍼 함수이다.

경로 미들웨어는 Nuxt 애플리케이션의 middleware/ 디렉토리에 저장된 탐색 가드다(달리 설정하지 않는 한).

 

Type

addRouteMiddleware (name: string | RouteMiddleware, middleware?: RouteMiddleware, options: AddRouteMiddlewareOptions = {})

 

매개변수

• name : 문자열이거나 RouteMiddleware 유형의 함수일 수 있다. 함수는 다음 경로 to를 첫 번째 인수로, 현재 경로 from를 두 번째 인수로 사용하며 둘 다 Vue 경로 객체다.
  
  • type : string | RouteMiddleware

참고) 경로 개체의 사용 가능한 속성.

• middleware : 두 번째 인수는 RouteMiddleware 유형의 함수다. 위와 동일하게 to 및 from 경로 객체를 제공한다. addRouteMiddleware()의 첫 번째 인수가 이미 함수로 전달된 경우 선택 사항이 된다.
  • type : RouteMiddleware
• options : 선택적 options 인수를 사용하면 global 값을 true로 설정하여 라우터 미들웨어가 전역인지 여부를 나타낼 수 있다(기본적으로 false로 설정됨).
  • type : AddRouteMiddlewareOptions

 

사용 예

익명 경로 미들웨어

익명 경로 미들웨어에는 이름이 없습니다. 함수를 첫 번째 인수로 사용하면 두 번째 middleware 인수는 필요없다.

// plugins/my-plugin.ts

export default defineNuxtPlugin(() => {
  addRouteMiddleware((to, from) => {
    if (to.path === '/forbidden') {
      return false
    }
  })
})

 

명명된 경로 미들웨어

명명된 경로 미들웨어는 문자열을 첫 번째 인수로, 함수를 두 번째 인수로 사용한다.

플러그인에 정의되면 middleware/ 디렉토리에 있는 동일한 이름의 기존 미들웨어를 재정의한다.

 

// plugins/my-plugin.ts

export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-middleware', () => {
    console.log('named middleware added in Nuxt plugin')
  })
})

 

 

글로벌 경로 미들웨어

선택적인 세 번째 인수를 설정{ global: true }하여 경로 미들웨어가 전역인지 여부를 나타낸다.

// plugins/my-plugin.ts

export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-middleware', (to, from) => {
      console.log('global middleware that runs on every route change')
    },
    { global: true }
  )
})