Laravel8+jetstream+Inertiaな環境でセッションが切れたときにモーダルダイアログの中にログインフォームが出てくる入れ子問題

Laravel

タイトル長すぎ問題。。。要はタイトル通りの状態を何とかしたいと思って検索したら対処法が「jetstreamをバージョンアップする」ということだったのでメモ。

  • Laravel 8
  • jetstream (Inertia)

な環境で,ログイン後SPAライクにInertiaを使っていろいろしているとき,セッションが切れるとログインページにリダイレクトされる。ここで希望の動作は画面全体が読み直され(もしくは書き換えられ)てログインページにリダイレクトされること。

こんな感じでセッションタイムアウトの際のログインフォームがモーダルの中に読み込まれ,入れ子になってしまう

jetstreamをバージョンを指定しないでインストールすると2020/10/21現在1.x系がインストールされる。しかしこのバージョンでは新規登録,やログインフォームはInertiaを使用するのではなくて通常のBladeが使われている。そのため,Inertiaで作った部分からログインフォームを呼び出そうとするとちぐはぐなことになってしまっている(んだと思う)

この問題はGitHub上のjetstreamのリポジトリをみるとすでにissueが上がっていて(Inertia – Expired session causes the website to be displayed in a modal #128)プルリクエストもすでにMasterブランチにマージされている。([2.x] Inertia.js: Add support for all Jetstream-provided views. #298)

中途半端にログインや新規登録フォームはBladeの通常のHTMLを返すのに,ログイン後はSPAという状態よりも,サイト全体がSPAになっているほうが整合性が取れていいのでこれからjetstreamを使い始める場合は2.xをインストールしたほうが後々楽だと思う。

jetstreamのバージョンを2.xでは,新規登録やログインあたりもInertiaを使う(SPAになっている)ので,セッション切れの時のログインページ表示も全体が書き換えられる。

composerでjetstream 2.x系をインストールするコマンド(以前のバージョンは自動的に削除される)Laravelのプロジェクトはすでに作成済み,マイグレーションも済んでいる状態とする。

composer require laravel/jetstream:"2.x-dev"

次いで,artisanでプロジェクトで使用する各種ファイルを作成する。この時すでにもしプロジェクトが進行中の場合注意しないといくつかのファイルが上書きされ,これまでの変更していたものが初期化されてしまう。自分で書いた部分が消えてしまうという悲劇を避けるために,Gitでコミットしてブランチを切っておくことを強く推奨。

初期化されるファイルのうちこのあたりのファイルはいじっている可能性が高いので危険かも・・・

  • web.php
  • Models/User.php
  • Layouts/AppLayout.vue
  • Dashboard.vue
php artisan jetstream:install inertia

チーム機能を使用する場合は「–teams」を付加

php artisan jetstream:install inertia --teams

アセットをまとめるこのコマンドも実行しておく

npm install && npm run dev

Laravel8勉強中

そろそろLaravelも勉強しないとな,,ということで始めたLaravelの勉強,Vue.jsも初めてなので悪戦苦闘,まずはLimeWireでやったほうが良かったかも。

Laravelの理解だけでも苦労しているのに,Vueが入ってくると何が何だか分からなくなってくる。。やっぱ一つ一つの技術を単体でしっかり理解してから組み合わせるほうがいい。

しかしVueは難しい。。。いきなりInertia使うんじゃなくてもっと基本からやったほうがいいんだろうな。と思う今日この頃。

Laravel勉強中なので変なこと言ってたら教えてください!

この記事を書いた人

PHPが好物な個人開発プログラマ。フリーランスエンジニアとしてWebサービス作ったりしてます。15年の経験を生かしてMENTAでメンターもやってます。WordPressやPHPでお困りのことがあればご相談に乗りますのでDMください。

Follow on SNS
Laravel
SOHO MIND

Comments

タイトルとURLをコピーしました