Vueと共通

【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を記載✍️


グローバル使用


ローカル使用


無名middleware


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

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

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

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


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

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

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

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

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

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

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


まとめ

使い方自体は簡単なmiddleware🌟

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

-Vueと共通
-,

© 2020 aLiz Nuxt