Jae Front-end Study

Middlewares with Nuxt 3 — Course part 8

https://www.youtube.com/watch?v=PhuJE0ayD6A&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=8

유튜브 강의를 참고하고 있습니다.

Middleware란

Nuxt에서 미들웨어(Middleware)는 페이지나 레이아웃이 렌더링 되기 전에 호출되는 커스텀 훅(Hook)이다.

store, route, params, query, redirect 등에 접근할 수 있기 때문에 내비게이션 가드 형태로 미들웨어 제작이 가능하다.

쉽게 말해 특정 경로로 이동하기 전에 실행하려는 코드를 만들 때 이상적이다.

1. middleware 폴더 만들기

• middleware/auth.global.ts

middleware 폴더 안에 파일을 만들 때 파일명 뒤에 .global을 붙이면 별도의 import 없이 전역에서 사용할 수 있는 미들웨어가 된다.

export default defineNuxtRouteMiddleware((to, from) => {
  console.log(to)
  console.log(from)
})

2. auth.global.ts (글로벌 미들웨어)

• middleware/auth.global.ts

글로벌로 만든 미들웨어에서 navigateTo를 이용해 리다이렉트를 할 경우, isLoggedIn이 계속 false이기 때문에 무한 리다이렉트에 빠져 주의해야 한다.

export default defineNuxtRouteMiddleware((to, from) => {
  let isLoggedIn = false

  if(isLoggedIn) {
    return navigateTo(to.fullPath)
  } else {
    return navigateTo('/auth')
  }
})

3. auth.ts (페이지 정의 미들웨어)

• pages/index.vue

1. auth.global.ts 미들웨어에서 .global을 지운다.
2. auth.ts 미들웨어를 사용할 페이지에 import 한다.
3. / 루트 페이지에 접속하면 바로 /auth 페이지로 이동됨을 볼 수 있다.

<template>
  <h1>Main page</h1>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})
</script>