Редирект в Nuxt

Посредник может не только подготовить данные, но и запретить открытие страницы. Если условие не выполняется, функция возвращает результат функции navigateTo с нужным путём. Nuxt отменяет текущий переход и выполняет навигацию на указанный адрес вместо исходной страницы.

Давайте изучим простой запрет доступа. Страница vault.vue защищена посредником vault.js. В файле зададим константу allowed со значением false, чтобы пример всегда срабатывал:

export default defineNuxtRouteMiddleware(() => {
	const allowed = false;
	
	if (!allowed) {
		return navigateTo('/login');
	}
});

При попытке открыть /vault шаблон Vault не появится: сработает возврат с путём /login. Достаточно страницы login.vue с любой подписью. Когда allowed станет true, возвращать ничего не нужно. Страница подключает посредник по имени vault:

<script setup>
	definePageMeta({
		middleware: 'vault',
	});
</script>
<template>
	<h1>
		Vault
	</h1>
</template>

Сделайте страницу secret с посредником, который при невыполнении условия отправляет пользователя на /gate.

Сделайте страницу gate с заголовком Gate, чтобы было видно, что редирект сработал.