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

本篇文章同步發表於 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>

執行順序分別為:

  1. auth.global.js
  2. 自訂匿名 middleware
  3. 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

Nuxt.js 3.x Server 目錄-建立 API Nuxt.js 3.x 自訂 Error Page 與錯誤處理

評論

廣告
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×