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

対処法：jetstreamのdev-masterを使用する

環境

  • Laravel 8
  • jetstream (Inertia)

問題

ログイン後SPAライクにInertiaを使っていろいろしているとき，セッションが切れるとログインページにリダイレクトされる。しかし，こんな感じにセッションタイムアウトの際のログインフォームがモーダルの中に読み込まれ，入れ子になってしまう

画像名

希望する動作

画面全体が読み直され（もしくは書き換えられ）てログインページにリダイレクトされること。

1.xの動作

　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をインストールしたほうが後々楽だと思う。

2.xの動作

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

2.xへのアップデート

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

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

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

php artisan jetstream:install inertia

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

php artisan jetstream:install inertia --teams

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

npm install && npm run dev

注意すべきファイル（例）

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

  • web.php
  • Models/User.php
  • Layouts/AppLayout.vue
  • Dashboard.vue

動作確認

　ブラウザでアクセスして動作確認をする

Laravel8勉強中（ここからは駄文です）

　最近Laravelを勉強し始めました。Laravelだけでなく一緒にVue.jsまでついてきて混戦状態に。
　まずはLimeWireでやったほうが良かったかも。
　Laravelの理解だけでも苦労しているのに，Vueが入ってくると何が何だか分からなくなってくる。
　やっぱ一つ一つの技術を単体でしっかり理解してからでないと組み合わせるときにどっちの問題かわからなくなる。

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

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