Vue Nuxt 3 使用路由中間件(Middleware)

本篇介紹Vue Nuxt 3的路由中間件(Route Middleware)的使用。

Nuxt的中間件是安插在頁面路由切換之間的邏輯，在導向特定路由前可做一些判斷來決定是否繼續或導向其他路由，常用於身分權限檢核、參數合法性、流程順序控制。要注意避免在中間件中抓取DOM或呼叫API取資料等不屬於流程判斷的操作。

原本在[出口業務]頁面點選[訂單]會路由到[訂單明細]頁面，不過若直接在網址列輸入http://localhost:3000/home/export/abc也可以前往[訂單明細]頁面，但顯示的訂單號碼為#abc，但訂單號碼只能為數字，為了避免這個情形，便可以利用中間件來檢查導向至/home/export/${order.id}的路由。

事前要求

參考「Vue Nuxt 3 動態路由 Dynamic Route」。

建立Middleware

Nuxt約定將中間件的邏輯程式放在middleware目錄下，這樣頁面使用時便可直接import。

在專案根目錄新增middleware目錄，然後在裡面新增check-order-id.ts，此即為middleware程式。

check-order-id.ts中預設匯出defineNuxtRouteMiddleware函式，其接收兩個參數to和from，分別為前往路由和來源路由。

從to可取得動態路由參數orderId，並判斷若不是數字，則調用navigateTo重新導向至/home/export回到[出口業務]頁面並回傳。

check-order-id.ts

export default defineNuxtRouteMiddleware((to, from) => {
  const orderId = to.params.orderId;
    
  // 如果不是數字，就導回[出口業務]頁面
  if (!/^\d+$/.test(String(orderId))) {
    return navigateTo("/home/export");
  }
});

使用中間件

接著就可以在路由的頁面，也就是[訂單明細]頁面pages/home/export/[orderId].vue中加入中間件check-order-id，如此路由到此頁面前都會先經過中間件的邏輯。

在definePageMeta函式傳入參數設定middleware: 'check-order-id'。

pages/home/export/[orderId].vue

<script setup>
definePageMeta({
  middleware: 'check-order-id'
})

const router = useRouter()
const route = useRoute()
const orderId = route.params.orderId

function back() {
  router.push(`/home/export`)
}
</script>

<template>
  <div>
    <h1>訂單詳情 #{{ orderId }}</h1>
    <button @click="back">返回</button>
  </div>
</template>

github

測試

在瀏覽器輸入http://localhost:3000/home/export/abc會回到[出口業務]頁面，而不會導向[訂單明細]頁面。