Closed8

Laravel+Vueログインできない問題

kita127kita127

問題

Laravel + Vue 構成の SPA Webアプリケーションでログインできない事象が発生.

現象の詳細

  • フロントエンド(Vue)からログインのエンドポイントに対するリクエストは問題なくステータスコード200となる
  • 認証後のユーザー情報取得エンドポイント api/me でなぜか401 Unauthorized になる
  • なお、POSTMAN では問題なく api/meからレスポンスが返ってくる
kita127kita127

トライ1

環境の再構築.
docker, パッケージ, マイグレーションなどを再度クリーンな状態から再実施.

結果

ダメ. 特に変わらず

kita127kita127

いける、いけないの境界は以下の模様

  • ok
    • bcc6bcb0033869594219050d9fd7047b0f88be91
  • ng
    • 7c1c7563cd6fafcea96acdf705e61c12be8e7fe8
kita127kita127

トライすること

その1

Vue 側でログイン、Meそれぞれのリクエストを単発で行う処理を実装し試してみる。
たぶん、Meでこけると思うのでその場合は、何かが不足している。多分、取得したトークンを送っていないとかではなかろうか?

その2

エラーになってるミドルウェアの箇所を特定する。なんとなく EnsureFrontendRequestsAreStateful が怪しそうな気がする。

kita127kita127

トライすること

その1

ブラウザのクッキーをクリアして再度ログインをトライ後、Me にリクエストする。

期待値

たぶん、Me リクエストのタイミングで X-CSRF-TOKEN 送らないない。
その場合は、axios で X-CSRF-TOKEN の取得と送信ができていないことが原因。

結果

ログイン後、X-CSRF-TOKEN をリクエストヘッダに付与して Me にリクエストしていた。
そのため、X-CSRF-TOKEN の取得と送信は一見できていそう。

その2

Vue 側でログイン、Meそれぞれのリクエストを単発で行う処理を実装し試してみる。
たぶん、Meでこけると思うのでその場合は、何かが不足している。多分、取得したトークンを送っていないとかではなかろうか?

その3

エラーになってるミドルウェアの箇所を特定する。なんとなく EnsureFrontendRequestsAreStateful が怪しそうな気がする。

kita127kita127

csrf トークン取得するための /sanctum/scrf-cookie のエンドポイントである CsrfCookieController::show にブレイクポイントを張って以下の2パターンを実行。

  • Postman から /login -> /api/me
    • login, me それぞれでブレイクポイントにかかる
  • フロントから /login -> /api/me
    • 一度もブレイクポイントにかからない

以上から、CSRF トークンの取得と送付ができていないことが原因と思われる。

このスクラップは2024/02/04にクローズされました