В мире nuxt промежуточное ПО — это мощные кабельные стяжки, поддерживающие модульность вашего приложения. Но промежуточное ПО nuxt также дает вам большую силу старшего брата. Есть несколько передовых методов, которые вы можете использовать, чтобы получить максимальную отдачу от этих промежуточных программ, которые значительно расширят возможности вашего приложения. И сегодня я расскажу все, что вам нужно знать о ПО промежуточного слоя nuxt, чтобы сделать ваши приложения еще лучше.
Что такое Nuxt.js
Фреймворк Nuxt.js — отличный инструмент для создания одностраничных приложений Vue (SPA) с рендерингом на стороне сервера (SSR). Он построен на основе Vue, поэтому у вас есть доступ ко всем инструментам, необходимым для создания мощных SPA без особых усилий. Nuxt.js — это платформа, которая дает разработчикам возможность создавать высокопроизводительные приложения.
Nuxt предоставляет множество функций из коробки, таких как маршрутизация, управление метаданными, рендеринг на стороне сервера и многое другое. Nuxt также предоставляет удобную структуру папок, основанную на лучших практиках, чтобы дать толчок вашему следующему проекту.
Что такое промежуточное ПО (общее)
Мне всегда нравится понимать термин, прежде чем использовать его в контексте фреймворка.
Мне очень нравится определение от Microsoft Azure:
Промежуточное ПО — это программное обеспечение, которое находится между операционной системой и работающими в ней приложениями. Промежуточное программное обеспечение, по существу функционирующее как скрытый уровень перевода, обеспечивает связь и управление данными для распределенных приложений. Его иногда называют каналом, так как он соединяет два приложения вместе, поэтому данные и базы данных можно легко передавать между «каналами». Использование промежуточного программного обеспечения позволяет пользователям выполнять такие запросы, как отправка форм в веб-браузере или разрешение веб-серверу возвращать динамические веб-страницы на основе профиля пользователя.
Таким образом, промежуточное программное обеспечение — это своего рода клей, соединяющий две части программного обеспечения друг с другом.
Что такое промежуточное ПО в Nuxt.js
В nuxt.js промежуточное ПО — это функция, которая выполняется перед отрисовкой сайта. Это может быть, например, функция, которая проверяет, есть ли у пользователя привилегии для доступа к этому сайту или нет.
Внутри nuxt есть два типа промежуточного программного обеспечения. ПО промежуточного слоя маршрута, выполняемое в части vue вашего приложения.
Обычное промежуточное ПО, выполняемое в нитро части приложения.
В приведенном выше примере будет промежуточное программное обеспечение маршрута, поскольку оно будет перехватывать встроенный маршрутизатор vue.
Все промежуточные программы nuxt должны быть размещены в каталоге промежуточных программ/.
Промежуточное ПО маршрутизатора Nuxt3
Промежуточное программное обеспечение маршрутизатора находится внутри vue-части приложения.
В nuxt 3 есть три типа промежуточного программного обеспечения для маршрутов:
1: встроенное промежуточное ПО
Непосредственно определяется на странице.
2: Именованное промежуточное ПО
Определяется внутри каталога промежуточного программного обеспечения. Может использоваться перед переходом на страницу при ссылке на страницу.
Мы создадим упомянутое промежуточное ПО в следующей главе.
<script setup>
definePageMeta({
middleware: ["isAdministrator"]
// or middleware: 'isAdministrator'
})
</script>3: Global middleware
Также определяется внутри каталога промежуточного программного обеспечения. Будет выполняться перед маршрутизацией на любую страницу.
Пример промежуточного программного обеспечения маршрутизатора Nuxt
Как уже упоминалось выше, наиболее популярным вариантом использования является защита аутентификации.
Я также использую это в своих проектах. Но из соображений безопасности я буду использовать тривиальный пример для описания.
// middlewares/isAdministrator
export default defineNuxtRouteMiddleware((to, from) =>
// isAdmin() is an example method verifying if an user is authenticated
if (isAdmin() === false) {
logout();
return navigateTo('/login')
}
})
Вышеупомянутое промежуточное программное обеспечение проверяет, имеет ли текущий аутентифицированный пользователь права администратора или нет.
Каждое промежуточное ПО имеет два параметра: to и from.
Куда мы хотим найти.
Откуда мы пришли откуда.
Если у пользователя нет прав администратора, он выйдет из системы, и мы перенаправим его на страницу входа для повторного входа. Не лучший UX, но когда пользователь злой, мы будем 😈.
Если у пользователя есть права, мы ничего не делаем, что неявно означает, что мы перенаправляем на нужную страницу.
Это также главное отличие и большой недостаток стандартной реализации vue-router.
В более старых версиях vue-router у вас был третий параметр, называемый next(), который переходил по желаемому пути, но его никогда не было в промежуточном программном обеспечении nuxt.
Следующий параметр также был удален из vue-router и теперь является там только необязательным.
Промежуточное ПО сервера Nuxt3
Одно имя, другая цель.
Серверное промежуточное ПО в nuxt 3 находится на нитро-стороне вашего приложения.
Вы можете представить себе это промежуточное ПО как перехватчик axios.
Он примет любой запрос, который делает ваше приложение nuxt, перед любым другим маршрутом.
Оттуда вы можете регистрировать, проверять заголовки или добавлять дополнительные данные или готовить ответы.
Вы также можете создать собственную обработку ошибок внутри него.
Они могут сделать очень многое, но промежуточное ПО сервера не может возвращать значение!
Давайте приведем простой пример, чтобы лучше понять это:
Пример промежуточного программного обеспечения сервера Nuxt
Мы перехватим любой запрос и зарегистрируем то, что получим, прежде чем продолжить.
Для этого создайте папку сервера и папку промежуточного ПО внутри нее.
Создайте новый файл с именем logger.ts и вставьте в него следующий код:
export default defineEventHandler((event) => {
console.log('New request: ' + event.node.req.url)
})
Это приведет к следующему выводу в вашей консоли.
Обратите внимание, что мы находимся на стороне сервера, поэтому этот вывод не виден в консоли браузера.
Сценарии использования серверного промежуточного ПО Nuxt 3
Чтобы дать вам несколько идей о том, почему вы можете использовать это.
- Соответствие параметрам маршрута, таким как параметр [статья]
export default defineEventHandler((event) =>
`You want to read, ${event.context.params.name}!`)
- Файлы cookie запроса доступа
- Журнал запросов
- разогрейте API, у вас может быть API бесплатного плана Azure, который переходит в спящий режим при отсутствии запросов. Таким образом, первый обычно приводит к тайм-ауту. Вы можете сделать один первоначальный запрос, когда ваше приложение загружается в первый раз, чтобы разбудить API.
- Поймать весь маршрут
- Параметры запроса журнала
многое другое…
Заключение
У вас есть два типа промежуточных программ в nuxt3, и оба они очень полезны, когда вы их понимаете.
Они действительно склеивают части вашего приложения вместе.
Спасибо за чтение,
Алекс
Первоначально опубликовано на https://www.the-koi.com.
Рекомендации
Документация промежуточного ПО Nuxt.js
