【Laravel×Vue.js】リダイレクト時にセッションデータを持ってメッセージを表示 #Laravel

ログインユーザーのみアクセス可能なURL/sample/に非ログイン状態でアクセスした際、
ログインページにリダイレクトし、「この機能を使うためにはログインしてください。」とメッセージを表示させた時の実装です。
（/sample/からリダイレクトされた場合のみメッセージを表示する。）

SampleController.php

リダイレクトとともにセッションデータを渡す処理を記載

SampleController.php


namespace App\Http\Controllers;

// 現在のHTTPリクエストインスタンスを取得するため、Illuminate\Http\Requestクラスを指定
use Illuminate\Http\Request;

class SampleController extends Controller
{
    public function __invoke(Request $request)

        // 未ログイン時はloginページにリダイレクト
        // withで「showMessage」というセッションデータを渡す
        if (!\Auth::check()) {
            return redirect('login')->with('showMessage', true);
        }

        // ログインしていれば/sample/を表示
        return view('sample.index');
    }
}

redirect時に、withを使ってshowMessageというBoolean型のデータを持たせている。
（trueのところに'メッセージです。'とすると、テキストメッセージを持たせることも可能。）

これで未ログイン時に/sample/ページにアクセスすると、
/login/にリダイレクトされ、ページ上でshowMessageの値を使用できる。

login.blade.php

ログイン用のviewであるlogin.blade.phpで、セッションを表示してみる。

{{ session('showMessage') }}
// 1

/login/にshowMessageの真偽値true が渡っているので、「1」と表示される。
これでセッションデータで値が渡っているのを確認できた。

この値をvue.jsのコンポーネント に渡す処理をかく。

@section('content')
    <sample-component>
                 :show-message="{{ session('showMessage') ? 'true' : 'false'}} ">
    </sample-component>
@endsection

SampleComponent.vue

コンポーネントが埋め込まれているlogin.blade.php から渡されたセッションデータshow-message を、
親から子がデータを受け取る際に使うprops で受け取っておく。
（vue.jsではケバブケースではなくキャメルケースで受け取る。）

SampleComponent.vue

export default {
  props: {
    showMessage: {
      type: Boolean,
      default: false,
    },
  },
};

ここまできたら、受け取ったshowMessageを使って、
v-if などでtrueだったらメッセージを表示するなどが可能。

SampleComponent.vue

<template>
  <div class="mb-4">
    <div v-if="showMessage">
      <p>この機能を使うためにはログインしてください。</p>
    </div>
    ...省略...
  </div>
</template>

<script>
export default {
...省略...
  props: {
    showMessage: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

これで未ログイン時に/sample/ページから/login/にリダイレクトしてきた時のみ、
showMessageというセッションデータを持って真偽の判定を持たせることができました。