
例えば、ログインしてたらユーザー情報がでてくるけど
ログインしてなかったら別の表示になる
みたいな。
前提条件として、sanctomはすでにインストールされていて、設定も完了しているものとする。
//api.php Route::middleware('auth:sanctum')->get('/loginCheck',function (Request $request) { });
見慣れない書き方だが、無名関数というらしい。
わざわざ処理内容をコントローラーに書くほどのものでもないので、api.php上だけで完結する。
フロント側のページ
//Hoge.vue <template> <div> <div v-if="isLoggedIn"> <p>ログインしています。</p> <button type="button" @click="logout">ログアウト</button> </div> <div v-else> <p>貴様にこのページを表示する権利はない</p> </div> </div> </template> <script> title: 'Hoge', data() { return { isLoggedIn: false, } }, mounted() { axios .get("api/loginCheck") .then(response => { console.log(response) this.isLoggedIn = true }) .catch(error => { console.log(error); this.isLoggedIn = false }); }, } </script>
それにより表示内容を分岐させる。
そんなかんじ。
ログインしてなかったら無理やりログインページにリダイレクトすることもできる。
やり方はいろいろありそうだが、vuexを使えば「ログインしてください。」みたいなメッセージ付きにもできる。
気が向いたら書く。