1. 전역 라우터 가드(Global router guard) 설정

라우터 가드는 Nuxt.js의 미들웨어 함수를 사용하여 전역으로 설정됩니다. middleware 폴더에 auth.js와 같은 미들웨어 파일을 생성합니다.

// middleware/auth.js

export default function ({ store, redirect, route }) {
  // 인증된 유저인지 확인
  if (!store.state.authenticated) {
    return redirect('/login?redirect=' + route.fullPath)
  }
}

2. 페이지별 라우터 가드 설정

특정 페이지에 대한 라우터 가드를 설정하려면 해당 페이지의 Vue 파일에 middleware 프로퍼티를 추가합니다.

// pages/profile.vue

export default {
  middleware: 'auth'
}

이제 Nuxt.js는 페이지를 렌더링하기 전에 auth.js 미들웨어를 실행하여 사용자가 인증되어 있는지 확인합니다.

라우터 가드는 페이지 전환 전에 실행되므로 유저의 인증 여부를 확인하거나 권한을 검사하는 등의 작업에 유용합니다. 관리자만 접근 가능한 페이지를 보호하거나 인증되지 않은 유저를 로그인 페이지로 리디렉션하는 것과 같은 작업에 활용할 수 있습니다.

더 자세한 내용은 Nuxt.js 공식 문서의 미들웨어 가이드를 확인해보세요.