Nuxt3 - Middleware

路由中介軟體的三種類型

1. 匿名（或內聯）路由中介軟體：這種中介軟體直接在頁面內部定義。

2. 命名路由中介軟體：這類中介軟體放置在 middleware/ 目錄中，並在頁面使用時通過異步導入自動加載。

3. 全域路由中介軟體：這些中介軟體也放置在 middleware/ 目錄中，並以 .global 作為後綴，會在每次路由變更時執行。

建立一個 middleware 檔案

import { RoleEnum } from "~/models/enum";

export default defineNuxtRouteMiddleware((to, from) => {
    const role = useAuthRole();

    if (role !== RoleEnum.Manager && to.path === "/todo-list/leader") {
        return navigateTo("/");
    }

    if (role !== RoleEnum.Purchaser && role !== RoleEnum.Manager) {
        return navigateTo("/");
    }
});

page 中

definePageMeta({
    middleware: ["role"],
});

<script setup lang="ts">
definePageMeta({
    middleware: [
        function (to, from) {
            // Custom inline middleware
    },
    'auth',
  ],
});
</script>

可能的返回值

1. 沒有返回值（簡單的返回或完全不返回） - 不會阻止導航，並將移動到下一個中介軟體函數（如果有的話），或完成路由導航。

2. return navigateTo('/') - 重新導向到指定的路徑，並在伺服器端重新導向時將重定向代碼設置為 302 Found。

3. return navigateTo('/', { redirectCode: 301 }) - 重新導向到指定的路徑，並在伺服器端重新導向時將重定向代碼設置為 301 Moved Permanently。

4. return abortNavigation() - 停止當前導航。

5. return abortNavigation(error) - 以錯誤拒絕當前導航。

ordering global middleware

middleware/ · Nuxt Directory Structure

middleware/
--| 01.setup.global.ts
--| 02.analytics.global.ts
--| auth.ts

In case you're new to 'alphabetical' numbering, remember that filenames are sorted as strings, not as numeric values. For example, 10.new.global.ts would come before 2.new.global.ts. This is why the example prefixes single digit numbers with 0.