defineNuxtRouteMiddleware

defineNuxtRouteMiddleware 헬퍼 함수를 사용하여 명명된 경로 미들웨어를 만든다.

 

경로 미들웨어는 Nuxt 애플리케이션의 middleware/ 에 저장됩니다(달리 설정하지 않는 한).

 

매개변수

•  middleware : 두 개의 Vue Router의 경로 위치 객체를 매개변수로 사용하는 함수: 첫 번째 경로는 다음 경로 to이고, 현재 경로는 from.
  • type : RouteMiddleware

 

Vue Router 문서에서 RouteLocationNormalized의 사용 가능한 속성에 대해 알 수 있다.

 

사용 예

 

오류 페이지 표시

경로 미들웨어를 사용하여 오류를 발생시키고 유용한 오류 메시지를 표시할 수 있다.

// middleware/error.ts

export default defineNuxtRouteMiddleware((to) => {
  if (to.params.id === '1') {
    throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
  }
})

 

리디렉션

인증 상태에 따라 사용자를 다른 경로로 리디렉션하려면 라우트 미들웨어 내에서 useState 를  navigateTo 헬퍼 함수와 함께 사용한다.

export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth')
  
  if (!auth.value.isAuthenticated) {
    return navigateTo('/login')
  }

  if (to.path !== '/dashboard') {
    return navigateTo('/dashboard')
  }
})

 

navigateTo 및 abortNavigation 둘 다 전역적으로 사용 가능한 헬퍼 함수입니다. 

defineNuxtRouteMiddleware 내부에서 사용할 수 있다.