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

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

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

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

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Laravel 6

Laravel 6は、オープンソースなPHPのフレームワーク。Webアプリケーションの開発に適しており、バージョン6はLTSです。5.8での向上に加えて、セマンティックバージョニングの採用やLaravel Vaporとのコンパチビリティなどが変更されています。

PHP

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

Q&A

解決済

1回答

875閲覧

Laravel6でログイン後にユーザー情報を取得したいが、401エラーが発生しユーザー情報が返ってこない

gonzales54

総合スコア1

Vue.js

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

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Laravel 6

Laravel 6は、オープンソースなPHPのフレームワーク。Webアプリケーションの開発に適しており、バージョン6はLTSです。5.8での向上に加えて、セマンティックバージョニングの採用やLaravel Vaporとのコンパチビリティなどが変更されています。

PHP

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

0グッド

0クリップ

投稿2022/10/11 09:37

前提

こんにちは。
初めて質問させていただきます。
現在AWS上でLaravel6とvueでspaを構築している最中です。
ログイン機能を作るため、sanctumパッケージを使用しているのですが
そのアプリでログインは成功するのですが、ログイン後にユーザー情報を表示するページに移動してもユーザー情報が返ってこず401エラーが発生します。

お忙しいところ恐縮ですが、解決策を教えていただけますでしょうか。
何卒宜しくお願い致します。

  • ディレクトリ構成

https://gyazo.com/9176f38db7ec66d160e00b5b19bbab43
このような感じでlaravelの中にvue cliのフロント部分がありapi通信で動きます。

  • アプリ作成時に使用したサイト

https://tech.cydas.com/entry/vue-laravel-mspa1
https://qiita.com/Okkun555/items/2b4f999fb310dfea933f
http://adcomsoft.jp/acs_dev/2022/04/03/docker-laravel-vue-js-%E3%81%A7%E7%B0%A1%E5%8D%98spa%E3%80%9C%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89%E6%A7%8B%E7%AF%89%E3%80%9C%E7%B7%A8/

  • sanctumを導入する際、参考にしたサイト

https://codelikes.com/use-laravel-sanctum/
https://noumenon-th.net/programming/2020/05/26/sanctum/
https://zenn.dev/yudai64/articles/7caaa3c828b828
https://qiita.com/ucan-lab/items/3e7045e49658763a9566

実現したいこと

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

  • ログイン後にユーザー情報を返すAPIを作りたい。

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

エラーメッセージ ログイン後にユーザー情報を取得するページにて 401 (Unauthorized)

該当のソースコード

php

1api.php 2Route::middleware('auth:sanctum')->get('/user', function (Request $request) { 3 return $request->user(); 4}); 5

js(vue)

1login.vue 2 login() { 3 axios.get("/sanctum/csrf-cookie").then(response => { 4 axios.post('/api/login', { 5 email: this.email, 6 password: this.password 7 }) 8 .then(response => { 9 console.log(response); 10 localStorage.setItem("auth", "ture"); 11 this.$router.push("/about"); 12 }) 13 .catch(error => { 14 this.errors = error.response.data.errors; 15 }); 16 }); 17 }

env

1laravelのenv 2SESSION_DRIVER=cookie 3SESSION_LIFETIME=120 4SESSION_DOMAIN= 5SANCTUM_STATEFUL_DOMAINS=

php

1auth.php 2 'guards' => [ 3 'web' => [ 4 'driver' => 'session', 5 'provider' => 'users', 6 ], 7 8 'api' => [ 9 'driver' => 'sanctum', 10 'provider' => 'users', 11 'hash' => false, 12 ], 13 ],

php

1login controller 2 public function login(Request $request) 3 { 4 $credentials = $request->validate([ 5 'email' => 'required|email', 6 'password' => 'required' 7 ]); 8 9 if (Auth::attempt($credentials)) { 10 return response()->json(['message' => 'Login successful'], 200); 11 } 12 13 throw ValidationException::withMessages([ 14 'email' => ['The provided credentials are incorrect'], 15 ]); 16 }

試したこと

auth.phpのdriverをsanctumに変更した(効果なし)
.envのSANCTUM_STATEFUL_DOMAINSをherokuにデプロイしそのドメインを使ってみた。(効果なし)
api.phpに直接書くのではなく、controllerにユーザー情報を返却する処理を書いた(効果なし)
api.phpのreturn $request->userではなくreturn Auth::user()にした(効果なし)

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

開発環境
vue/cli 5.0.8
npm 8.19.2
node 16.15.0
laravel 6.20.44
php 7.33.3

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

virtualbox上で同じアプリを動かしたらユーザー情報が返ってきました。
失礼いたしました。

投稿2022/10/12 06:51

gonzales54

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問