Middleware маршрутов

Middleware маршрута — функция, которая выполняется перед тем, как открыть страницу. Она может пропустить переход, перенаправить на другой адрес или отменить переход. Типичный пример — не пускать гостей в панель управления блогом.

Создание

npx nuxi add middleware auth

Команда создаст файл app/middleware/auth.ts. Замените содержимое:

// app/middleware/auth.ts
export default defineNuxtRouteMiddleware(() => {
  const token = useCookie('token')
 
  if (!token.value) {
    return navigateTo('/login')
  }
})

useCookie('token') читает cookie с именем token и на сервере, и в браузере. Если cookie нет, функция возвращает navigateTo('/login') — переход на страницу входа. Если функция ничего не вернула, переход продолжается.

Подключение к странице

Middleware срабатывает только там, где его указали. Добавьте его в app/pages/admin.vue:

<!-- app/pages/admin.vue -->
<script setup lang="ts">
definePageMeta({
  layout: 'admin',
  middleware: 'auth'
})
</script>

Откройте /admin: без cookie token вас перебросит на /login. Дочерние страницы /admin/comments тоже защищены, потому что выводятся внутри admin.vue.

Что может вернуть middleware

Откуда и куда

Функция получает два маршрута: to — куда идёт пользователь, from — откуда:

// app/middleware/auth.ts
export default defineNuxtRouteMiddleware((to) => {
  const token = useCookie('token')
 
  if (!token.value) {
    return navigateTo({ path: '/login', query: { back: to.fullPath } })
  }
})

Теперь адрес будет /login?back=/admin/comments, и после входа страница входа сможет вернуть пользователя туда, откуда он пришёл.

Глобальный middleware

Если добавить к имени файла .global, middleware будет срабатывать при каждом переходе без указания на странице:

// app/middleware/track.global.ts
export default defineNuxtRouteMiddleware((to, from) => {
  console.log(`Переход: ${from.fullPath} -> ${to.fullPath}`)
})

При первой загрузке сообщение появится в терминале, где запущен npm run dev, при следующих переходах — в консоли браузера. Это показывает, что middleware выполняется и на сервере, и в браузере.

Частая ошибка

Глобальный middleware, который отправляет гостей на /login, срабатывает и при переходе на сам /login. Получается бесконечное перенаправление, и браузер показывает ошибку. Всегда пропускайте страницу, на которую перенаправляете: if (to.path === '/login') return.