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

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

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

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

PHP

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

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

Q&A

解決済

2回答

6764閲覧

Laravel + Vue のSPAアプリケーションでAuthが継続されない

qiitenai

総合スコア12

Vue.js

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

PHP

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

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Authentication

Authentication(認証)は正当性を認証する為の工程です。ログイン処理等で使われます。

0グッド

1クリップ

投稿2019/08/09 08:48

編集2019/08/09 10:05

前提

Laravel5.8とVue2.5でSPAアプリケーションを作成しております。
このアプリケーションではユーザーの認証機構を必要とします。
Laravel+Vueの構成での認証のBest Practiceなどを調べましたが、JWTAuthはLaravel5.8でインストールできないため、
認証ページのみLaravelにデフォルトで入っているauthを用いて作成しました。
(ログイン認証が必要な最初のページだけはphp artisan make:auth によって生成されたbladeを用いており、ログイン後の描画は全てVue.jsで書いています。)

発生している問題

ログイン直後のディレクトリ/では、Laravel DebugbarAuthのタブにて、ログインフォームで入力したユーザーが認証されていることが確認できるのに、別ページに遷移した時には認証されているユーザーがguestに切り替わってしまうケースがあります。
また、/hogeに遷移した時はユーザー認証が継続されているのに、/hugaに遷移したときはユーザー情報がGuestに切り替わっていることを確認しています。

[追記]ユーザー認証が継続されている/hogeへの移動の際は、vueファイルのtemplateexport default{}中でcreated()をしていないという共通点を見つけました。ということは、ユーザー情報が失われる/hugaのページでは、created()の中でLaravelのバックエンドからデータを取得する際に問題が起きているのでしょうか...?

ログイン直後、期待通りにユーザー情報を所持している時のLaravel Debagbar(/
イメージ説明

ログイン後に別のページに遷移してユーザー情報が途切れてしまった時のLaravel Debagbar(/huga
ユーザー情報がGuestに切り替わっていることがわかります。
イメージ説明

試したこと

ユーザー情報が途切れているページで

use Illuminate\Support\Facades\Auth; ... protected function index() { $user = Auth::user(); return response($user, 200) ->header('Content-Type', 'application/json'); }

などとしてもuser情報が出ないので、Laravel Debagbarの不調ではなく純粋にユーザー情報が途切れてしまっています。

また、同じようなVueによるページでもユーザー情報が取得できている//hogeではユーザー情報が途切れないのに//hugaではユーザー情報が途切れる事実からも何かVueとの連携でおかしいことが起きているのかと予想しておりますが、原因の切り分けがこれ以上できません。

また、//hugaで一度ユーザー情報がGuestになってしまうと、そのあとは/に戻ったとしてもユーザー情報はずっとGuestのままです。

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

Laravel5.8
Vue.js2.5
PHP7.2.19
LaravelのSESSION_DRIVERdatabaseですが、sessionsテーブルには問題なく期待通りのレコードが入っています。

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

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

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

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

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

mikkame

2019/08/09 10:07

クッキーがそのディレクトリのみ有効とかになってたり・・・?
qiitenai

2019/08/09 10:15

ご回答いただきありがとうございます。 クッキーに関しては全ルートで有効で、問題ありません。 今思っているのが、axiosでフロントエンドからバックエンドにデータを要求する時に認証が途切れていると検討がついてきたのですが、routes/api.phpに問題があったりするのでしょうか...?
mikkame

2019/08/09 10:20

routes/api.php の認証ドライバってデフォでtokenじゃないですか? config/auth.phpに書いてあるんでそれをsessionにしたらもしかしたら
qiitenai

2019/08/09 10:48

ありがとうございます。 config/auth.phpを色々修正してみましたが、うまく行きませんでした。 まず下記URLにあるようなAPI認証を導入しなければならないのでしょうか。 https://readouble.com/laravel/5.8/ja/api-authentication.html フロントエンドのvueファイルからのapiリクエストに関してバックエンドで認証を確認できないからauth情報が失われていると思っています。 フロントエンドからのapiリクエストがないルートでは認証が継続していることが根拠です。
mikkame

2019/08/09 10:52

あ、すみません、上記設定をしてうまく行っても web側がGuest、Api側がログイン済みになるだけですね。 私の場合は、APIリクエストでも常にセッションで処理してしまっているので・・・ routes/apiに書かれているルートをwebに移植したらログイン通ったりしますか?
qiitenai

2019/08/09 11:09

routes/web.php にルートを書き直したところ、先ほど認証継続がダメだったページでも継続するようになったりしました。 同じルーティングでも、/user/1(他の人の詳細ページ)では認証が途切れるのに、/user/2(ログインしている自分の詳細ページ)では認証が継続したりと、ルーティング以外にも問題があることがわかってきました。。。。
guest

回答2

0

route/api.phpの名前からJSから呼ぶAPIはここに書くと思いがちだけどよくある勘違い。

まず見る箇所はRouteServiceProvider
→webとapiの違いはmiddleware
→app/Http/Kernel.phpの$middlewareGroups
→apiではセッションが無効
→route/api.php側ではセッションを使う認証は不可。

Laravel+Vueを同じサイト(同一オリジン)で動かすならroute/web.phpに書けばいい。
api.phpはクロスオリジンな別サイトやスマホアプリから使うルート用。

もちろんRouteServiceProviderもKernelも自分でカスタマイズするのは自由。
api middlewareでセッションを有効化などすればapi.phpに書いてもいいようにはできる。

投稿2019/08/09 13:40

kawax

総合スコア10377

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

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

qiitenai

2019/08/09 13:43

ありがとうございます。 ちょうど同時刻に自己解決を投稿してしまいベストアンサーに選べないことが残念なのですが、大変わかりやすく参考になりました。
guest

0

自己解決

routes/api.phpにあったルーティング処理を全てroutes/web.phpに書き直すことで問題が解決しました。

また、最初このように書き換えてうまくいかなかったのは、routes/web.phpに書いたapiのルーティングを
Route::middleware(['auth'])の中に書いていたことが原因でした。
apiのルーティングはRoute::middleware(['auth'])の外に書いたら解決しました。

なお、routes/api.phpに書いて失敗していた抜本的な理由はまだわかっていませんが、何かsessionの処理でエラーが起きていたのだろうと予想しています。(config/session.phpconfig/auth.phpあたり。)

投稿2019/08/09 13:34

qiitenai

総合スコア12

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問