Nuxt.js 開發筆記 - Middleware

Middleware 會在一個頁面或一群頁面render之前執行的程式。

例如驗證使用者權限之類的功能,就會以middleware的方式來處理。

middleware會接收到一個context的變數作為第一個參數,關於context 裡面有key,可參考這裡

middleware被執行的順序如下:

  1. nuxt.config.js
  2. 符合的 layout
  3. 符合的 page

 

以下是參考範例
先在middleware裡面建立要執行的程式,檔名會自動可成為被呼叫的名稱

middleware/stats.js

import axios from 'axios'

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

nuxt.config.js

module.exports = {
  router: {
    middleware: 'stats'
  }
}

比較詳細的範例可參考 https://github.com/nuxt/example-auth0