iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0

本篇要回溯「Nuxt 請求處理流程」,介紹 validate() 前一步驟 - Middleware

Middleware 中文翻譯為 中介軟體中間件中介層,但描述上還是講 middleware 多一點

回憶這張重點流程圖

Middleware 模式十分常見,形容一來一往之間的中間者
你可以想成一般銷售市場的中盤商、經銷商

因為方便在流程內插一段處理邏輯,廣泛應用在後端框架(例如Express、Laravel)、前端狀態管理(例如Redux)

把 Nuxt 請求處理流程放大來看,實際長這樣

image-20181103225200113

並按照 middleware 設定層級,依序執行,從

  • nuxt.config.js 設的 middleware
  • Layout Component 設的 middleware
  • Page Component 設的 middleware

https://ithelp.ithome.com.tw/upload/images/20181103/20103424rS8ppmAHn5.png

這些 middleware 通常放在 /middlewares資料夾下

其結構是一組 收到 Nuxt context 的 function
將操作邏輯依用途切為單一 middleware,輕鬆修改 Nuxt context 狀態或某個屬性

如這組 setUserAgent.js 是根據前後端環境,設定 Nuxt 瀏覽器使用代理的屬性值

export default function (context) {
  context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}

這機制讓你容易將複雜驗證流程切割成一段一段驗證邏輯,隨不同頁面客製驗證邏輯

當然,驗證非常可能透過 API,碰到非同步,middleware 只需回傳 Promise 物件,剩下交給 Nuxt 排班即可

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

舉個透過 middleware 實現的例子

結帳頁面

  1. 需驗證使用者已登入 => /middleware/authenticated.js
  2. 需驗證使用者已完成註冊 => /middlewares/isRegistrationComfired.js
export default function ({ store, redirect }) {
  // If the user is not authenticated
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

讀者可以在 layout 設定

export default {
  middleware: [
    'authenticated'
  ]
}

checkout.vue 設定

export default {
  middleware: [
    'isRegistrationComfired'
  ]
}

而需要套用在全站的處理邏輯,再設 nuxt.config.js

export default {
  middleware: []
  /* 單數亦可用字串 */
  /* middleware: 'stat' */
}

備註

寫文同時是 MOPCON Day1,若用生活化譬喻描述 Middleware

「MOPCON Day1 被餵食數杯飲料,也是一個個 Middleware,其消耗過程就是 middleware 的流水線處理,把恐怖、成分複雜的黑暗料理拆解成數個成分單純的單杯飲料」


上一篇
18. Nuxt 運行模式 (Mode) 差在哪?
下一篇
20. Nuxt `<nuxt-link>` 有什麼特別
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32

尚未有邦友留言

立即登入留言