Nuxt.js 3.x Middleware 目錄－監聽路由變化

Nuxt3 ｜ 2023-09-05

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

Middleware 為 Nuxt 內的 路由守衛（Navigation Guards），相當於 Vue Router 內的 beforeEach callback，協助我們在進到頁面前進行事件處理（例如權限檢查）

Middleware 觸發時機：

頁面初始化：Server Side 跟 Client Side 同時觸發（觸發兩次）
頁面切換：Client Side 觸發

Middleware 定義方式：

具名：在 middleware/ 定義，並在需要的頁面引入
全域：同具名的定義方式，不過檔名需加上 .global 後綴，在所有頁面切換時自動執行
匿名：直接在單一元件檔內定義

具名 Middleware

範例：

middleware/
|—— auth.js

defineNuxtRouteMiddleware() 輔助函示：定義 route middleware
navigateTo() 輔助函示：導航到其他頁面
abortNavigation() 輔助函示：中斷導航，顯示錯誤資訊以及跳到錯誤頁面

// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
    const isLoggedIn = true; // 判斷是否登入
    const hasPermission = false; // 判斷有無頁面權限

    if (!isLoggedIn) {
        return navigateTo('/login');
    }

    if (!hasPermission) {
        return abortNavigation({
            statusCode: 403
            statusMessage: '無頁面權限'
        });
    }
});

在頁面透過 definePageMeta() 輔助函式定義 middleware

// pages/about.vue
<template>
    <div>...</div>
</template>

<script setup>
definePageMeta({
    middleware: [ auth ] // or middleware: 'auth'
});
</script>

接下來當我們切到 http:localhost:3000/about，驗證無頁面權限跳轉至錯誤畫面

全域 Middleware

全域引入的 Middleware。同具名定義方式，不過檔名需加上 .global 後綴，在所有頁面切換時自動執行

範例：

middleware/
|—— auth.global.js

匿名 Middleware

在頁面內各別定義

// pages/about.vue
<template>
    <div>...</div>
</template>

<script setup>
definePageMeta({
    middleware: [
        (to, from) => {
            // 這裡是匿名 middleware 內容
        }
    ]
});
</script>

Middleware 執行順序

執行順序首先為全域 Middleware，接下來才是頁面定義的 Middleware（依照順序）

範例：

middleware/
|—— auth.global.js
|—— redirect.js

// pages/about.vue
<template>
    <div>...</div>
</template>

<script setup>
definePageMeta({
	middleware: [
        (to, from) => {
            // ...
        },
        'redirect'
    ]
});
</script>

執行順序分別為：

auth.global.js
自訂匿名 middleware
redirect.js

動態加入 Middleware

使用 addRouteMiddleware(name, middleware, options) 輔助函式動態加入 Middleware

範例：在 plugins/ 加入 middleware

具名

會覆蓋掉定義在 middleware/ 資料夾內同名檔案（auth.js）

// plugins/add-middleware.js
export default defineNuxtPlugin(() => {
    addRouteMiddleware('auth', (to, from) => {
        // ...
    });
});

匿名

// plugins/add-middleware.js
export default defineNuxtPlugin(() => {
    addRouteMiddleware((to, from) => {
        // ...
    });
});

全域

options 加上 { global: true }

// plugins/add-middleware.js
export default defineNuxtPlugin(() => {
    addRouteMiddleware('auth', (to, from) => {
            // ...
        },
        { global: true }
    );
});

參考資源：

https://nuxt.com/docs/guide/directory-structure/middleware
https://nuxt.com/docs/api/utils/define-nuxt-route-middleware

#nuxt3

Nuxt.js 3.x Middleware 目錄－監聽路由變化

Middleware 觸發時機：

Middleware 定義方式：

具名 Middleware

全域 Middleware

匿名 Middleware

Middleware 執行順序

動態加入 Middleware

具名

匿名

全域

評論

Your browser is out-of-date!