質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

解決済

sanctumで保護されたlaravelのAPIをVue.jsから実行したい

ttpk
ttpk

総合スコア338

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1回答

0グッド

0クリップ

315閲覧

投稿2022/10/30 15:00

編集2022/10/30 15:24

前提

Vue.jsで画面を作成しバックエンドはlaravelのAPIで構築する
SPAのサービスを開発中です

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • sanctumで保護されたlaravelのAPIをVue.jsから実行したい

発生している問題・エラーメッセージ

https://noumenon-th.net/programming/2020/05/26/sanctum/
こちらのページを参考にログイン・ログアウトの機能を作成することはできましたが

api.phpで認証されていないと実行できないように設定したAPIを実行すると401が返ってきてしまいます。

PHP

1Route::group(['middleware' => ['auth:sanctum']], function () { 2 認証されたページで使用するAPI 3}

ログイン、ログアウト時のバックエンドの処理

PHP

1<?php 2 3namespace App\Http\Controllers; 4 5use Illuminate\Http\Request; 6use Illuminate\Support\Facades\Auth; 7 8class LoginController extends Controller 9{ 10 11 public function login(Request $request) 12 { 13 $credentials = $request->validate([ 14 'email' => 'required|email', 15 'password' => 'required' 16 ]); 17 18 if (Auth::attempt($credentials)) { 19 return response()->json(['message' => 'Login successful'], 200); 20 } 21 22 throw ValidationException::withMessages([ 23 'email' => ['The provided credentials are incorrect'], 24 ]); 25 } 26 27 public function logout() 28 { 29 Auth::logout(); 30 return response()->json(['status_code' => 200,'message' => 'Logged out'], 200); 31 } 32 33} 34

ログイン時のフロント側で実行する処理

Javascript

1<script> 2import axios from 'axios'; 3 4export default { 5 data() { 6 return { 7 email: "", 8 password: "", 9 errors: [] 10 }; 11 }, 12 methods: { 13 login() { 14 axios.get("/sanctum/csrf-cookie").then(response => { 15 axios 16 .post("/api/login", { 17 email: this.email, 18 password: this.password 19 }) 20 .then(response => { 21 console.log(response); 22 localStorage.setItem("auth", "true"); 23 this.$router.push("/autoFunction"); 24 }) 25 .catch(error => { 26 this.errors = error.response.data.errors; 27 }); 28 }); 29 } 30 } 31}; 32</script> 33

ログアウト時にvueファイルで実行する処理

Javascript

1<script> 2import axios from 'axios'; 3 4export default { 5 data() { 6 return { 7 user: "" 8 }; 9 }, 10 mounted() { 11 axios.get("/api/getUserInfo").then(response => { 12 this.user = response.data; 13 }); 14 }, 15 methods: { 16 logout() { 17 axios 18 .post("api/logout") 19 .then(response => { 20 console.log(response); 21 this.user = ""; 22 localStorage.removeItem("auth"); 23 this.$router.push("/login"); 24 }) 25 .catch(error => { 26 console.log(error); 27 }); 28 } 29 } 30}; 31</script> 32

試したこと

https://maasaablog.com/development/laravel/1011/
こちらのサイトを参考に設定を確認

app/Http/Kernel.php

1 'api' => [ 2 EnsureFrontendRequestsAreStateful::class, 3 'throttle:api', 4 \Illuminate\Routing\Middleware\SubstituteBindings::class, 5 ],

config/sanctum.php

1 'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf( 2 '%s%s', 3 'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,マシンのIPアドレス:8000,検証環境用ドメイン,::1', 4 env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : '' 5 ))),

ローカル環境には「http://127.0.0.1:8000/」からアクセスしています

config/cors.php

1<?php 2 3return [ 4 5 'paths' => ['api/*', 'sanctum/csrf-cookie'], 6 7 8 'supports_credentials' => true, 9 10]; 11

resources/js/bootstrap.js

1window.axios = require('axios'); 2 3window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 4 5window.axios.defaults.withCredentials = true;

resources/app.js

1import Axios from 'axios' 2 3const axios = Axios.create({ 4 baseURL: 'http://localhost:8000', 5 headers: { 'X-Requested-With': 'XMLHttpRequest' }, 6 withCredentials: true 7}) 8 9export default axios
SESSION_DRIVER=cookie SESSION_LIFETIME=120 SESSION_DOMAIN=localhost SANCTUM_STATEFUL_DOMAINS=localhost:8000

他に確認が必要な箇所はどこになるでしょうか?

補足情報(FW/ツールのバージョンなど)

Laravel v8.83.23
PHP v7.4.18
"vue": "^2.5.17",
"axios": "^0.21.4",

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

自己解決

ログイン時に発行されるx-xsrf-tokenが
リクエストを投げる際のヘッダーに付与されていないことが原因でした

開発ツールでヘッダーの中身を見てみたところ

set-cookieヘッダーを介してcookieの設定を試みましたがDomain属性が
現在のホストURLに関して無効だったため、ブロックされました

というメッセージが表示されていました。

投稿2022/11/01 16:37

ttpk

総合スコア338

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。