Laravel 8 JWT Authentication Tutorial: Login & Signup API

上記サイトのPostmanを使うまでができている状態です。

github https://github.com/jirentaicho/Laravel-de-iroiro/tree/f-token

今回は発行されたトークンをローカルストレージに保存して、トークンを利用するようにしてみます。環境としてはVue3とaxiosを使います。

apiのルーティングは以下のようになっています。

Route::group(['middleware' => 'api', 'prefix' => 'auth'], function($router) {
    Route::post('/login', [AuthController::class, 'login'])->name('api.login');
    Route::post('/register', [AuthController::class, 'register']);
    Route::post('/logout', [AuthController::class, 'logout'])->name('api.logout');
    Route::post('/refresh', [AuthController::class, 'refresh']);
    Route::get('/user-profile', [AuthController::class, 'userProfile'])->name('api.user'); 
    Route::get('/user-value', [AuthController::class, 'userValue'])->name('api.value'); 
});

トークンの保持

クッキーやセッションストレージなどを利用する方法もあるかと思いますが、ログイン後に発行されるトークンをローカルストレージに保存します。

ログイン処理が成功したらローカルストレージにトークンを保存します。

login(){
    axios.post(route('api.login',this.params))
        .then(res => {
            // 取得したトークンをローカルストレージに保存する
            localStorage.setItem('access_token', res.data.access_token);
            location.href = route('web.mypage');
        })
        .catch(err => {
            console.log(err);
        })
},

このトークンを利用してユーザーの情報を取得する

<template>
    <div>
        <h1>ようこそ</h1>
        <P>{{name}}さん</P>
    </div>
</template>

<script>
    import { defineComponent } from 'vue'
    export default defineComponent({
        components: {

        },
        data(){
            return {
                name: ""
            }
        },
        async mounted(){
            await axios.get(route('api.user'), {
                headers:{
                    Authorization: `Bearer ${localStorage.getItem('access_token')}`
                }
            })
            .then( res => {
                console.log(res);
                this.name = res.data.name;
            })
            .catch( err => {
                console.log(err);
            })
        },
    })
</script>

ローカルストレージにもトークンが保存されていることが確認できます。

ログアウト

ログアウトするときには、axios.default.headers.commonにキーを渡すような記載でないと、401エラーになって処理ができませんでした。

そのため以下のようにしてログアウトの処理を行います。

methods: {
    async logout(){
        // post時はこの書き方でないと401エラーになる
        axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
        await axios.post(route('api.logout'), {
            headers:{
                "Content-Type": "application/json",                        
            }
        })
        .then( res => {
            console.log(res);
            localStorage.removeItem('access_token');
        })
        .catch( err => {
            console.log(err);
        })
    }
},

ちなみにログアウト時にはローカルストレージからトークンを削除しています。実際にも以下のように削除されます。

独自のデータ

ログインしていないと独自のデータが取得できないようにします。といってもルートにミドルウェアを設定していれば、Tokenまで必須でGetリクエストする必要があります。

コントローラーは以下のように単純です。特段tokenの検査などは入っていません。

public function userValue() {
     return response()->json([ 'result' => 'お腹が空いたんだよ' ]);
}

例えば以下のような場合はトークンが設定されていないので取得できません

async getValue(){
    axios.get(route('api.value'))
    .then( res => {
        console.log(res);
    })
    .catch( err => {
        console.log(err);
    })
}

トークンを設定してあげれば取得できます

async getValue(){
    axios.get(route('api.value'), {
        headers:{
            Authorization: `Bearer ${localStorage.getItem('access_token')}`,
            "Content-Type": "application/json",   
        }
    })
    .then( res => {
        console.log(res);
    })
    .catch( err => {
        console.log(err);
    })
}

ヘッダー情報の自動付与

ヘッダー情報には毎回Tokenを付けているので自動付与します。bootstrap.jsを以下のように修正します。

window._ = require('lodash');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// add Token Info
window.axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
window.axios.defaults.headers.common['Content-Type'] = "application/json";

これでヘッダー情報を毎回記載する必要がなくなります。

Laravel | JWTで発行したトークンをローカルストレージに保存して利用する