Nuxtで画面に横断的にMiddlewareを適用する #nuxtjs #vuejs

概要

Nuxtにはミドルウェアという機構がある。

ミドルウェアを使うと、ページがレンダリングされる前に、実行されるカスタム関数を定義できる。

複数のページでミドルウェアを実行するには3つ方法がある。

nuxt.config.js でrouterに読み込ませる
layoutでミドルウェアを読み込む
layoutを使用しているページ全てで読み込まれる
各ページでミドルウェアを読み込む

nuxt.config.js で読み込まれる方法を使うと、すべての画面遷移時にミドルウェアが実行されるようになる。
(ブラウザの更新ボタンによるリロード含む)

この方法を試してみる。

なおMiddlewareは nuxt.config.js → レイアウト → page の順で実行されるそうだ。

Middlewareの作成

単純にログだけ吐くミドルウェア、middleware/sample.js を作成する

export default function({ route }) {
  console.log('サンプルミドルウェア', route.path)
}

routerでの読み込み

nuxt.config.js で作成したミドルウェアを読み込む。

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

これで、全画面遷移時にパスをログ出力するようになる。

いろいろやってみる

せっかくなので middleware/sample.js 修正して色々試してみる。

パスの値を判定
Vuexストアの値を操作
ストアの値を見てリダイレクト

export default function({ route, redirect, store }) {
  // ログ出力
  console.log('サンプルミドルウェア', route.path)

  // 現在のパスを取得
  const currentPath = route.path
  if (currentPath !== '/hoge') {
    // hogeページでは何もしない
    return
  }

  // storeに数値を保持してカウントアップする
  store.dispatch('count/countUp')
  const count = store.getters['count/count']
  if (count % 2 === 0) {
    // storeの値が偶数のときだけhogeページは表示できる
    console.log('hogeページに行けるのはstoreが偶数のときだけ', count)
    // fugaページにリダイレクト
    redirect('/fuga')
  }
}

この例で使用しているVuexストアは store/count.js で下記の通り。

export const state = () => ({
  count: 0,
})

export const mutations = {
  increment(state) {
    state.count++
  },
}

export const getters = {
  count(state) {
    return state.count
  },
}

export const actions = {
  countUp(context) {
    context.commit('increment')
  },
}

参考

ja.nuxtjs.org ja.nuxtjs.org