Nuxt.js는 미들웨어를 사용하여 페이지나 레이아웃이 렌더링되기 전에 코드를 실행할 수 있는 기능을 제공합니다. 이를 통해 인증, 권한 부여, 데이터 로딩 등의 작업을 처리할 수 있습니다.

미들웨어 생성

1. middleware 폴더 생성: 먼저 루트 디렉토리에 middleware 폴더를 생성합니다.

2. 미들웨어 파일 생성: middleware 폴더 내에 새로운 미들웨어 파일(e.g., auth.js)을 생성합니다.

3. 미들웨어 함수 작성: 새로 생성한 미들웨어 파일(e.g., auth.js) 내에서 원하는 작업을 수행하는 함수를 작성합니다.

    // middleware/auth.js
    export default function ({ app, redirect }) {
      if (!app.$auth.loggedIn) {
        return redirect('/login')
      }
    }
   

미들웨어 적용

1. 페이지 또는 레이아웃에 적용: 미들웨어를 사용하려는 페이지 또는 레이아웃에 미들웨어를 적용합니다.

    // pages/secure.vue
    export default {
      middleware: 'auth'
    }
   

2. 전역 미들웨어 등록: nuxt.config.js 파일에서 전역 미들웨어를 등록할 수도 있습니다.

    // nuxt.config.js
    export default {
      router: {
        middleware: 'auth'
      }
    }
   

주의사항

• 미들웨어 함수는 app 객체를 통해 Nuxt.js 애플리케이션과 관련된 기능에 접근할 수 있습니다.
• redirect 함수를 사용하여 페이지 리다이렉션을 구현할 수 있습니다.
• 미들웨어는 페이지나 레이아웃이 렌더링되기 전에 실행되므로, 인증 및 권한 관련 작업에 유용하게 활용될 수 있습니다.

이제 Nuxt.js에서의 미들웨어 사용 방법에 대해 잘 숙지하셨습니다. 원하는 미들웨어를 작성하고 페이지 또는 레이아웃에 적용하여 원하는 작업을 수행할 수 있을 것입니다.

더 자세한 정보는 Nuxt.js 미들웨어 가이드를 참고하시기 바랍니다.