使用するバージョン
laravel/framework : 8.65
tymon/jwt-auth : 1.0

Laravelの初期設定とかはこちらの記事も参考にしてください。
DBにusersテーブルがありデータがはいっているものとします。

Laravel8でシンプルなCMSを作るチュートリアル[2020年版]

ちなみにほぼ公式ドキュメントの通り進めます。

jwt-auth

インストールと初期設定

ライブラリのインストール

コンポーザーでインストールしましょう。

$ composer require tymon/jwt-auth

設定ファイルの書き出し

JWTに必要な設定ファイルのベースを書き出します。

$ php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

config/jwt.phpにファイルが生成されます。

シークレットキーの生成

$ php artisan jwt:secret

.envにJWT_SECRETという項目が追加されているのを確認してください。

ユーザーモデルの修正

ユーザーモデルにJWTSubjectをimplementsして、getJWTIdentifierとgetJWTCustomClaimsメソッドを追加します。

app/Models/User.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Tymon\JWTAuth\Contracts\JWTSubject;

class User extends Authenticatable implements JWTSubject
{
	use HasFactory, Notifiable;

	// ...

	/**
	 * Get the identifier that will be stored in the subject claim of the JWT.
	 *
	 * @return mixed
	 */
	public function getJWTIdentifier()
	{
		return $this->getKey();
	}

	/**
	 * Return a key value array, containing any custom claims to be added to the JWT.
	 *
	 * @return array
	 */
	public function getJWTCustomClaims()
	{
		return [];
	}
}

Authコンフィグの設定

guardsにapiの部分を追加します。
基本はセッション認証にしたいのでdefaultsは変更しません。

config/auth.php

'guards' => [
	'web' => [
		'driver' => 'session',
		'provider' => 'users',
	],
	'api' => [
		'driver' => 'jwt',
		'provider' => 'users',
	],
],

ルーターの設定

API用のルーターを編集してAuthControllerにアクセスできるようにします。

routes/api.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Api\AuthController;

Route::prefix('auth')->group(function () {
    Route::post('login', [AuthController::class, 'login']);

    Route::middleware('api')->group(function () {
        Route::post('logout', [AuthController::class, 'logout']);
        Route::post('refresh', [AuthController::class, 'refresh']);
        Route::post('me', [AuthController::class, 'me']);
    });
});

コントローラーの作成

artisanでコントローラーの作成

$ php artisan make:controller Api/AuthController

次のように編集します。

app/Http/Controllers/Api/AuthController.php

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;

class AuthController extends Controller
{
	/**
	* Get a JWT via given credentials.
	*
	* @return \Illuminate\Http\JsonResponse
	*/
	public function login()
	{
		$credentials = request(['email', 'password']);

		if (! $token = auth('api')->attempt($credentials)) {
			return response()->json(['error' => 'Unauthorized'], 401);
		}
		return $this->respondWithToken($token);
	}

	/**
	* Get the authenticated User.
	*
	* @return \Illuminate\Http\JsonResponse
	*/
	public function me()
	{
		return response()->json(auth('api')->user());
	}

	/**
	* Log the user out (Invalidate the token).
	*
	* @return \Illuminate\Http\JsonResponse
	*/
	public function logout()
	{
		auth('api')->logout();

		return response()->json(['message' => 'Successfully logged out']);
	}

	/**
	* Refresh a token.
	*
	* @return \Illuminate\Http\JsonResponse
	*/
	public function refresh()
	{
		return $this->respondWithToken(auth('api')->refresh());
	}

	/**
	* Get the token array structure.
	*
	* @param  string $token
	*
	* @return \Illuminate\Http\JsonResponse
	*/
	protected function respondWithToken($token)
	{
		return response()->json([
			'access_token' => $token,
			'token_type' => 'bearer',
			'expires_in' => auth('api')->factory()->getTTL() * 60
		]);
	}
}

authヘルパーは引数をしない場合config/auth.phpのdefaultsで設定したguardが実行されます。
引数を指定することでguardsを変更することができます。
api guardを使用する場合は引数にapiとします。
ヘルパーではなくファサードを使用する場合はAuth::guard('api')のようにします。

JavaScriptでAPI認証してみる

JavaScriptでAPIログインしてトークンを取得してみましょう。
ここでは、Laravelのビルトインサーバーをlocalhost:8000で立ち上げているものとします。 

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios
    .post('http://localhost:8000/api/auth/login', {
        email: 'user1@example.com',
        password: '123456789'
    })
    .then(function (response) {
        console.log(response.data);
    });
</script>

レスポンスはaccess_token,expires_in,token_typeが返ると思います。
Bearerに取得したaccess_tokenの値を設定することで認証が必要なAPIにアクセスすることができます。

トークンを使用してAPIから情報を取得

作成したサンプルにログインしたユーザーの情報を取得するmeというAPIがあるのでこれを実行してみましょう。

axios
	.get('http://localhost:8000/api/auth/me', {
		headers: {
			Authorization: 'Bearer [取得したトークン]',
		}
	})
	.then(function (response) {
		console.log(response.data);
	});

[取得したトークン]の部分を先ほど取得したトークンに置き換えてください。
これでユーザー情報を取得することができたと思います。