Laravel開発、ログイン情報をヘッダに表示させる
前回記事で新規登録・ログイン機能を精査し、不要なコードを削除しました。
現状としてユーザー自身の情報を扱う機能は新規登録・ログインする・ログアウトするの3つです。
ログイン必須のサイトなので、本情報ページに入ればログインはできていますが、ログインしたユーザーの情報は一切表示されていないので、画面上に表示させることにしました。
今回の目的
ログインしているユーザーの情報を画面上に表示させる
なぜやるか
ログインしているユーザー情報を表示することで、誰でログインしているかが明確にわかるようにするため
やりたいこと
ヘッダにユーザー名と所有書籍数を表示させたい
ユーザー情報を表示させるためのデータ取得設定をしたい
やったこと
ユーザー情報実装手順を確認する
ユーザー情報表示のマークアップ
マークアップ内容を部品化
部品呼び出し時にBD処理を追加する
キャッシュをクリアする
実施内容
実装方法を考える
表示位置
ユーザーのステータスを表示する画面がいままでなかったので、これを実装します。
元々はマイメージに作ろう…としていったんビューは作っていましたが、レイアウトを見直すうちに削除していました。
今回改めてどこにつけるか検討したところ、ヘッダの右側のスペースに表示させることにしました。
ヘッダに設置することにより、ログイン中は常に画面上部に表示されることになります。
ヘッダにDBからデータを取得して表示させる
ビュー画面でDBからデータを取得して表示させるには、コントローラー上で取得データを変数へ格納して引き渡してやる必要が有ります。
これだけの知識でヘッダにユーザー情報を表示させるには…すべてのビューでユーザー情報を渡してあげる必要があるわけですが…。
もっと便利な物がないか調べてみました、こちらを参考にさせて頂きました、ありがとうございます。
このビューコンポーザーを利用してみます。
対象コンポーネントが呼び出す時に任意引数を渡してあげるというもの。
ログイン情報をコンポーネント化しておいて、ログイン情報を渡せばひとつの設定でユーザー情報を常に表示できそう…というわけです。
ということで、先にコンポーネントと見た目を作成してレイアウトに表示させるのが必要。
実装する
ユーザー情報表示エリアのマークアップ
まずは見た目の表示を用意します。
# ログイン後ページ
Logoutのみの表示だったヘッダ右側に新たにユーザー情報を表示させました。
# マークアップ後
名前、所持書籍数、ログアウトの3つを表示させました。
# ~/resource/views/layouts/layout.blade.php
ログアウトに関してはフォームとして設定し動作する状態にしています。
ユーザー情報表示を部品化する
先程参考にしたビューコンポーザーを利用するため、まずは作成したユーザー情報表示をコンポーネントとして部品化します。
# ~/resource/views/components/user_nav.blade.php
後はビューコンポーザーとしての設定をします。
サービスプロバイダを利用する
手順としてはサービスプロバイダを追加して、プロバイダ上でコンポーザーを呼び出す処理を実施することで、コンポーザーが呼び出された際にプロバイダで記述した処理を実施します。
ビューコンポーザー が呼ばれたときに、ユーザー情報が読み込まれる…としてくれれば、個別にビューに対してデータを読み込む必要がなくなるわけです。
サービスプロバイダはコマンドで追加できます。
$ php artisan make:provider UserServiceProvider
新たに作成されたプロバイダファイルに必要なデータをいれます
# ~/app/Providers/UserServiceProvider.php
ユーザー情報を扱うプロバイダとして作成しました。
この中で、29行目以降にビューコンポーザーを定義しています。
部品として作成したuser_navが呼び出された時に、ユーザー情報とユーザー所持書籍数を取得する構造としました。
ユーザー所持書籍は以前作成したスコープを利用しています。そこから、数だけを取得するのでcountとしています。
サービスプロバイダを登録する
サービスプロバイダ用のファイルは作成しましたが、コンフィグでサービスプロバイダを追加してあげる必要があります。
# ~/config/app.php
'providers' => [
App\Providers\UserServiceProvider::class,
],
先程作成したサービスプロバイダをproviders内に追加することで使用できます。
ユーザーデータを表示する
# ~/resource/views/components/user_nav.blade.php
データ取得設定ができたので、後はデータを表示させます、ビューコンポーザー呼び出し時に設定した変数を設定します。
しかし、この後エラーとなりうまく表示ができない状態となりました。
これについては、こちらを参考にさせて頂きました、ありがとうございます。。
キャッシュを削除したところ正常に動きました。前にもこんなことがあったな…。
設定を全て行っても問題がある場合は、コードの見直しをすると共に、キャッシュも疑った方がいいですね。
ログイン情報表示は以上で完了となります。
ユーザー情報を扱う工程として残っているのはユーザー名の編集や削除といった所が全く出来ていたいので、このあたりを実施したいところです。
