Vue.js+Laravel sanctumでログイン済か判断して表示内容を変更する方法

2022年4月20日 2022年4月22日

例えば、ログインしてたらユーザー情報がでてくるけど

ログインしてなかったら別の表示になる

みたいな。

前提条件として、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を使えば「ログインしてください。」みたいなメッセージ付きにもできる。

気が向いたら書く。