案件でmiddlewareを触る機会があったので、調べたりしたことなどをまとめています。

middlewareとは？

ページをレンダリングする前に実行する関数を指定していきます。
ログインチェック等やその他ページ制限をかけてリダイレクトさせるような処理に使われる場合が多いようです。

記述の仕方が３パターンほどあります。

プロジェクト全体に指定する

nuxt.config.jsに下記のように指定する事でプロジェクト全体に適用させることができます。

export default {
  router: {
    middleware: 'check'
  }
}

特定のページで指定する

page/index.vue内のscriptタグ内に記載しているイメージです。
これで記述したページのみに適用させることができます。

<script>
  export default {
    middleware: 'check'
  }
</script>

特定のページで関数を実行する

小規模なものや使い回しをしないものであれば、直接記述する形でも問題がないようです。

<script>
  export default {
    middleware({ store, redirect }) {
      if (!store.state.check) {
        return redirect('/')
      }
    }
  }
</script>

まとめ

実際に使うのは初めてだったのですが、特定の条件下で閲覧させたくないページ等がある場合は非常に便利だなと感じました。
大規模になれば複雑になることは間違い無いですが様々な要件に対応できるようになると思うので、よく覚えていきたいです。