[SPA] Laravel Sanctum認証に必要な設定まとめ

環境

• php 8.0
• laravel 8.75
• laravel/sanctum 2.11
• fruitcake/laravel-cors 2.0

前提

• 面倒なことせずにaxiosを使うこと。
  ただし探求心を忘れないものはfetchAPIで無為な時間を消費してもよい。
• フロント・バックエンド間は同ドメイン同士の通信が好ましい

Laravel側の設定

config/cors.php

    'supports_credentials' => true,

app/Http/Middleware/Authenticate.php

    protected function redirectTo($request) {
        if (!$request->expectsJson()) {
-             return route('login');
+            abort(401, 'Not Verified.');
        }
    }

abilityまたはabilitiesを使用するためには以下も必要

app\Http\Kernel\

protected $routeMiddleware = [
    //...
    'abilities' => \Laravel\Sanctum\Http\Middleware\CheckAbilities::class,
    'ability' => \Laravel\Sanctum\Http\Middleware\CheckForAnyAbility::class,
]

参考設定(Axios)

util.ts

const server_base_url = import.meta.env.VITE_SERVER_URL;
const api_server_base_url = import.meta.env.VITE_API_SERVER_URL;

const apiAxios = axios.create({
	baseURL: api_server_base_url,
	timeout: 5000,
	withCredentials: true,
	headers: {
		'Content-Type': 'application/json',
		Accept: '*/*',
		credentials: 'include',
	},
});
const baseAxios = axios.create({
	baseURL: server_base_url,
	timeout: 5000,
	headers: {
		'Content-Type': 'application/json',
		Accept: '*/*',
	},
});

baseAxios.get('sanctum/csrf-cookie');

function axiosLoginTokenSet(token: string) {
	apiAxios.interceptors.request.use(config => {
		(<AxiosRequestHeaders>config.headers).Authorization = `Bearer ${token}`;
		return config;
	});
}

忘れがちなこと

フロント側であらかじめ${server_url}/sanctum/csrf-cookieにGETで通信しておくこと。

CSRF保護

この通信の際にはwithCredentials: trueや、headers.credentials: 'include'は必要ない。