axiosでPOSTした際にレスポンスが取得できない

Question

前提・実現したいこと

フロントVue.js バックエンドLaravel（ 同じドメイン ）
Laravelの標準の認証機能を使ってログイン機能を作成中です
ログイン成功時に返ってくるuserのdataを使いたい

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

import axios from 'axios';

export default {
  ・・・
 axios.post('/login', {
          email: this.email,
          password: this.password,
      })
          .then(function (response) {
              console.log(response.data);
          })
          .catch(function (error) {
               console.log(error);
          });
・・・

axiosを使って上記の様にしていてthenに入るんですが肝心のresponse.dataが空で返ってきてしまいます。

{data: "", status: 204, statusText: "", headers: {…}, config: {…}, …}
config: {url: "/login", method: "post", data: "{"email":"[e-mail]","password":"12345678"}", headers: {…}, transformRequest: Array(1), …}
data: ""
headers: {cache-control: "no-cache, private", date: "Tue, 09 Jun 2020 09:37:12 GMT", server: "Apache/2.4.41 ()", status: "204"}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
status: 204
statusText: ""

試したこと

わざと間違ったアドレスとか何も入力しないでPOSTするとしっかりcatchに入るのでログインに成功はしてるけど
取得できてないのだと思われます

足りない情報ありましたら追記しますのでよろしくお願いします。

Comments

[rururu3]

laravel側のlogin処理部分のソースが足りないです。よろしくおねがいします。

[Laxxx0214]

間違えました！
Laravel側は標準で備わっているログインの機能を使ってるんですがどこのソースを乗せれば良いでしょうか？？

[rururu3]

Laravel標準のを利用してカスタマイズしてないんですね…了解です。

[Laxxx0214]

はい。。。
何か考えられる原因とかってありますかね？( ;∀;)

Answer 1

Laravel標準のを利用してるということで、

LoginController.phpからtrait AuthenticatesUsersなので、
AuthenticatesUsersのソースを見ると

    public function login(Request $request)
    {
// 略
        if ($this->attemptLogin($request)) {
            return $this->sendLoginResponse($request);
        }

なのでログインできたらsendLoginResponse関数に行って

    protected function sendLoginResponse(Request $request)
    {
        $request->session()->regenerate();

        $this->clearLoginAttempts($request);

        if ($response = $this->authenticated($request, $this->guard()->user())) {
            return $response;
        }

        return $request->wantsJson()
                    ? new Response('', 204)
                    : redirect()->intended($this->redirectPath());
    }

でauthenticated関数で戻り値があればそれを返すなので関数見ると

    protected function authenticated(Request $request, $user)
    {
        //
    }

何も返してないので

        return $request->wantsJson()
                    ? new Response('', 204)
                    : redirect()->intended($this->redirectPath());

に行く。axiosでjson要求してると思うのでstatus204返す。のが原因。

Laravel 7.x 認証
ユーザー認証時に返されるレスポンスのより堅牢なカスタマイズが必要な場合のため
を見てカスタマイズしてください。

※質問内容にログイン成功時に返ってくるuserのdataを使いたい…って書いてますが、帰ってくるっていうのはどのように調べましたか？
※axiosでAPIアクセスだからAPIで作るべきっていうのは考慮してません。

Comments

[Laxxx0214]

とても丁寧な解説ありがとうございます！！
rururu3さんのおかげで無事解決できました(*'▽')
大変ありがとうございました！

[Laxxx0214]

追記の文章に回答遅れました！
一応ログインに成功したらその情報をvuexのstateにもたせるのかなと思ってました！
ちなみにこちらの記事を参考にしてました！
https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3#%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3

[rururu3]

参考されてるのみたら、registerのときは返すように処理やってるようですね。