Порядок посредников в Nuxt

Одной странице можно назначить несколько именованных посредников. В definePageMeta поле middleware принимает массив строк. Nuxt вызывает файлы строго слева направо: первый элемент массива выполняется раньше второго.

Давайте изучим пару коротких файлов auth.js и logger.js. Первый при невыполнении условия сразу возвращает редирект, поэтому до второго очередь не дойдёт, пока условие в первом файле ложно:

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

Второй посредник мог бы выполнить свою работу только после успешного auth:

export default defineNuxtRouteMiddleware(() => {
	const hit = useState('loggerHit', () => false);
	hit.value = true;
});

Страница задаёт порядок явно: сначала auth, затем logger. При allowed = false в auth.js переход оборвётся на первом шаге и logger.js не запустится. Если поменять элементы местами в массиве, изменится и реальный порядок вызовов. Именно порядок в массиве задаёт цепочку, а не алфавит имён файлов в папке:

<script setup>
	definePageMeta({
		middleware: ['auth', 'logger'],
	});
</script>
<template>
	<h1>
		Reports
	</h1>
</template>

Сделайте страницу заказов с посредниками gate и log в массиве middleware в указанной последовательности.

Пусть gate при невыполнении условия отправляет на /login, а log выполняется только если gate не прервал переход.