Vue.js+Laravel sanctumでログイン済か判断して表示内容を変更する方法
例えば、ログインしてたらユーザー情報がでてくるけど
ログインしてなかったら別の表示になる
みたいな。
前提条件として、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を使えば「ログインしてください。」みたいなメッセージ付きにもできる。

気が向いたら書く。

無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事