【Nuxt.js】Nuxt文法編：middleware

前置き

ログインチェックなどに使われる
middleware💫

ログイン状態をチェックし、
trueなら閲覧できて👀
falseならログインページへ飛ばす✈️
といったアレです！

簡単な使い方と
私がやってしまったNG例なども
合わせて紹介していきます🍒

公式:
https://ja.nuxtjs.org/guide/routing/#ミドルウェア
 https://ja.nuxtjs.org/api/pages-middleware/

middlewareとは

前置きにも書きましたが、
ログインチェックなどで使われるものです。
ページを表示する前に
実行したい関数を設定できるもの💡

とても分かりやすい記事があったので
抜粋させていただきました❤️

・ミドルウェアを使用すると、ページがレンダリングされる前(SSR処理などが行われる前)に設定された関数を実行することができる
・認証許可が必要なページやログイン後のリダイレクトパスを保持するために使用される。
・関数はmiddleware/ディレクトリに入れる
・ミドルウェアは第一引数にcontextを取る
・contextの内容についてはこちらを参照
・ユニバーサルモードの場合は、サーバーサイドで一度だけ呼び出される。
　(Nuxtアプリケーションへの最初のリクエスト時、またはページの再読み込み時)クライアントサイドでは、他のルートへ移動した時に呼び出される。
・SPAモードの場合、クライアントサイドでの最初のリクエスト時と他のルートへ移動した時に呼び出される。
https://qiita.com/ono-ta/items/22ae1fc6c75ba75f4029

簡単な使い方

middlewareの種類は2種類。

・名前付きmiddleware
　middleware配下に関数を作ります。
・無名middleware
　ページに直接
　middlewareの関数を作ります。

⬇️route.pathを表示してくれる
　関数を作ってみます🍭🧙‍♀️

localhost:3000/check
にいくと/checkが表示されます。

名前付きmiddleware

middleware配下に
jsファイルを作成📁

グローバル使用
nuxt.config.jsに
使用middlewareを記載✍️

ローカル使用
使いたいページに
使用middlewareを記載✍️

グローバル使用

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

export default function({ route }) {

console.log('サンプルミドルウェア', route.path)

}

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

module.exports = {

router: {

middleware: 'sample'

}

ローカル使用

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

export default function({ route }) {

console.log('サンプルミドルウェア', route.path)

}

<template>
  <h1>middlewareを使いたいページ</h1>
</template>

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

<h1>middlewareを使いたいページ</h1>

</template>

export default {

middleware: 'sample'

}

</script>

無名middleware

<template>
  <h1>シークレットページ</h1>
</template>

<script>
  export default {
    middleware ({ route }) {
      console.log('サンプルミドルウェア', route.path)
    }
  }
</script>

<h1>シークレットページ</h1>

</template>

export default {

middleware ({ route }) {

console.log('サンプルミドルウェア', route.path)

}

</script>

NG例①どんな状態でもログイン画面に飛ばしてやる

試しにめっちゃ簡単に使おうと思って
こんなコードを書きました。

export default function ({ redirect }) {
  return redirect('/login')
}

export default function ({ redirect }) {

return redirect('/login')

}

これをやると
真偽値の判定基準がなく
ページをずっと読み込み続けて
ぐるぐる🌀しますのでご注意を😂

モードをssrにすれば
できちゃいますが、
そもそもよろしくないコードなので
真似しないでくださいね😂笑

NG例②ログインしていなれけばログインページに飛ばす、ただし…

名前付きmiddleware作った✨
nuxt.config.jsでグローバル化した✨
これで全ページで毎回実行される✨

からと言って
これではNGでした❌

export default function({ store, redirect }) {
  // ユーザーが認証されていないとき
  if (!store.getters['isLogin']) {
    return redirect('/login')
  }
}

export default function({ store, redirect }) {

// ユーザーが認証されていないとき

if (!store.getters['isLogin']) {

return redirect('/login')

}

どこのページからどこに遷移させる、
まで書かないとですね🤷‍♀️

ログインしている人だけが見れる
特定のページがあるわけで…
どのページからログイン画面に飛ばすかを
設定する必要があるので…

当たり前といえば
当たり前なのですが❗️笑

こういうこともよくあります🤣

export default function ({ store, route, redirect }) {
  if (route.name === 'my-page') {
    if (!store.getters['isLogin']) {
      return redirect('/login')
    }
  }
}

export default function ({ store, route, redirect }) {

if (route.name === 'my-page') {

if (!store.getters['isLogin']) {

return redirect('/login')

}

まとめ

使い方自体は簡単なmiddleware🌟

ただログイン周りのfirebaseAuthや
ログイン状態保持のためのvuexと
掛け合わせると複雑になってきます。
その辺はまた別記事でやろうかと思ってます❣️