使用 addRouteMiddleware 動態新增中間

Amd794發表於2024-08-04

title: 使用 addRouteMiddleware 動態新增中間
date: 2024/8/4
updated: 2024/8/4
author: cmdragon

excerpt:
摘要：文章介紹了Nuxt3中addRouteMiddleware的使用方法，該功能允許開發者動態新增路由中介軟體，以實現諸如許可權檢查、動態重定向及路由變化時的特定操作。內容涵蓋路由中介軟體的概念、addRouteMiddleware的語法、引數、使用示例（包括匿名中介軟體、命名中介軟體、全域性中介軟體、覆蓋現有中介軟體）及除錯技巧。強調了此功能為Nuxt3應用帶來的靈活性和便利性。

categories:

  • 前端開發

tags:

  • Nuxt3
  • 中介軟體
  • 路由
  • 動態
  • 許可權
  • 重定向
  • 導航

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

在 Nuxt3 中，addRouteMiddleware 允許開發者在應用程式中動態新增路由中介軟體。這為你提供了靈活性，可以在不同情況下執行導航守衛，例如處理許可權、重定向，以及在路由變化時執行特定操作。

什麼是路由中介軟體？

路由中介軟體是一個函式，可以在使用者導航到特定路由前執行某些操作。它通常用於：

  • 檢查使用者許可權
  • 動態重定向使用者
  • 登入或載入資料

在 Nuxt3 中，所有中介軟體通常位於 middleware/ 目錄中，但透過使用 addRouteMiddleware，你可以在執行時動態新增它們。

addRouteMiddleware 語法與引數

語法

addRouteMiddleware(name: string | RouteMiddleware, middleware?: RouteMiddleware, options: AddRouteMiddlewareOptions = {})

引數

  • name: (string | RouteMiddleware)

    • 可以是字串（用於命名中介軟體）或一個路由中介軟體函式，型別為 RouteMiddleware。

  • middleware: (RouteMiddleware)

    • 這是一個函式，接受兩個引數：
      • to: 目標路由物件，包含使用者要訪問的路由資訊。
      • from: 源路由物件，包含使用者當前所在的路由資訊。

  • options: (AddRouteMiddlewareOptions)

    • 一個可選的物件，用來設定中介軟體的額外選項。當前可以設定的選項是：
      • global: (boolean) 如果設定為 true，則該中介軟體為全域性中介軟體，預設為 false。

使用 addRouteMiddleware

1. 匿名路由中介軟體

在你需要簡單的邏輯處理時，建立匿名路由中介軟體非常方便。

示例：禁止訪問特定頁面

// plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware((to, from) => {
    // 如果使用者嘗試訪問 /forbidden 路徑，則阻止導航
    if (to.path === '/forbidden') {
      console.log('訪問被阻止：使用者嘗試訪問從未授權的路徑：', to.path);
      return false; // 阻止導航
    }
  });
});

解釋：

在上述示例中，如果使用者嘗試訪問 /forbidden 頁面，導航將被阻止並輸出日誌。

2. 命名路由中介軟體

命名路由中介軟體可以用字串命名，便於後續呼叫和覆蓋。

示例：記錄每次導航日誌

// plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware('logger-middleware', (to, from) => {
    console.log('使用者從', from.path, '導航到', to.path);
  });
});

解釋：

在這個示例中，我們為中介軟體命名為 logger-middleware。這個中介軟體將在每次導航時輸出使用者的導航日誌。可以透過 addRouteMiddleware 的方式再次覆蓋同名中介軟體。

3. 全域性路由中介軟體

全域性中介軟體在每次路由變更時都會執行，適用於需要在每個路由之間共享邏輯的場景。

示例：全域性訪問控制檢查

// plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware('auth-check', (to, from) => {
    const isAuthorized = false; // 假設這裡是你的認證邏輯

    if (!isAuthorized) {
      console.warn('使用者未授權，重定向到登入頁面');
      return navigateTo('/login'); // 重定向到登入頁面
    }
  }, { global: true });
});

解釋：

在這個示例中，我們建立了一個全域性中介軟體 auth-check，每次路由更改時都會檢查使用者是否被授權。如果使用者未授權，則重定向到 /login 頁面。

4. 覆蓋現有中介軟體

當使用命名的中介軟體時，新的中介軟體將覆蓋已有的同名中介軟體。如下所示：

// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
  // 原有邏輯
});

// 然後在 plugins 中新增覆蓋
// plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware('auth', (to, from) => {
    console.log('覆蓋了舊的 auth 中介軟體');
    // 新的邏輯
  });
});

在這個例子中，plugins/my-plugin.ts 中的中介軟體將覆蓋 middleware/auth.js 中的內容。這樣的特性可以幫助我們在特定條件下修改原有邏輯。

進行中介軟體除錯

在開發過程中，除錯中介軟體是個重要步驟。可以使用簡單的 console.log 輸出除錯資訊，幫助理解中介軟體的執行流程。例如：

// plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware((to, from) => {
    console.log('[Middleware Debug]', 'From:', from.path, 'To:', to.path);
  });
});

這可以幫助你確認中介軟體的執行順序和路徑變更。

總結

透過使用 addRouteMiddleware，你可以靈活地在 Nuxt3 應用中新增、覆蓋和管理路由中介軟體。這為實現複雜的導航邏輯、訪問控制和資料處理提供了必要工具。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 addRouteMiddleware 動態新增中間 | cmdragon's Blog

往期文章歸檔：

  • 使用 abortNavigation 阻止導航 | cmdragon's Blog
  • 使用 $fetch 進行 HTTP 請求 | cmdragon's Blog
  • 使用 useState 管理響應式狀態 | cmdragon's Blog
  • 使用 useServerSeoMeta 最佳化您的網站 SEO | cmdragon's Blog
  • 使用 useSeoMeta 進行 SEO 配置 | cmdragon's Blog
  • Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig | cmdragon's Blog
  • Nuxt.js 路由管理：useRouter 方法與路由中介軟體應用 | cmdragon's Blog
  • useRoute 函式的詳細介紹與使用示例 | cmdragon's Blog
  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog
  • 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
  • 使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog
  • Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog
  • 使用 useLazyFetch 進行非同步資料獲取 | cmdragon's Blog
  • 使用 useLazyAsyncData 提升資料載入體驗 | cmdragon's Blog
  • Nuxt.js 中使用 useHydration 實現資料水合與同步 | cmdragon's Blog

相關文章