30代専業主婦の独学エンジニア挑戦ブログ

実務未経験の30歳の専業主婦が独学でエンジニアを目指すブログです

Vue + Vue Router + Vuex +Laravel 写真共有アプリ作成 (4)

勉強記録

Vue + Vue Router + Vuex +Laravelで写真共有アプリを作るチュートリアルを行い、

一通り完成したので、自分の復習もかねてまとめます!

参考サイトのチュートリアルの記事が全16記事でしたので、それに合わせてまとめていきます♪
www.hypertextcandy.com

認証API

注意!
Laravel 6.0 からはログイン機能は、laravel/uiという別パッケージとして管理されるようになった。
このパッケージをインストールする必要がある。

参考サイト

更新! Laravel6/7「make:Auth」が無くなった 〜Laravel6/7でのLogin機能の実装方法〜MyMemo - Qiita

API用のルート

APIと画面のルート定義は別々のファイルに記述した方がわかりやすい。
APIのルート定義はweb.phpではなく、api.phpに記載する。

RouterServiceProvider.phpを編集
RouterServiceProviderはアプリケーションの起動時にルート定義を読み込むためのクラス
api.phpに記述したルート定義に適用されるミドルウェアグループはapiだけど、それをwebに変更。

Laravelはwebとapiミドルウェアグループを最初から用意している。
それぞれのミドルウェアグループの定義は、Kernel.phpの$middlewareGroupsに記載されている。

(なぜwebに変更したのか)
apiミドルウェアグループでは、ステートレスなWeb APIが想定されているため、セッションやクッキー、CSRFトークンを扱うミドルウェアが含まれていない。

今回実装するAPIは内部からしか呼ばれないし、クッキー認証をおこなうステートフルなものなので、ミドルウェアグループは画面と同じwebに設定。

テストの準備

動作確認のためにテストコードを書く。

テストには開発用のPostgreSQLデータベースとは別の、SQliteデータベースを使用。
インメモリのSQLiteを使用するので、テスト実行後は消去され無駄なデータが残らない。
SQLiteを使う設定を行うために、database.phpphpunit.xmlを編集。

会員登録API

I/O設計 Input(リクエストデータ)とOutput(レスポンス)を設計する。

(リクエスト)
デフォルト通りに、name、email、password、password_confirmationを受け取る。

(レスポンス)
登録成功後は登録ユーザーの情報を返却。
返却されたユーザーデータをフロントエンドで保存しておいて、認証状態のチェックに使える

テストコード

assertStatusメソッドは、返されたレスポンスが指定したHTTPステータスコードを持っていることをアサートする。

assertJsonメソッドは、レスポンスを配列に変換し、JSONレスポンスの中に、指定された配列があるか確認する。

ルート定義

api.phpにルート定義を書いていく

// 会員登録
Route::post('/register', 'Auth\RegisterController@register')->name('register')
コントローラー

RegisterController.phpにメソッドの追加

use Illuminate\Http\Request; // ★ 追加

class RegisterController extends Controller
{
    /* 中略 */

    // ★ メソッド追加
    protected function registered(Request $request, $user)
    {
        return $user;
    }
}

(なぜこのメソッドを追加するのか)
registerメソッドが定義されているRegistersUsersトレイトを見てみる。

(トレイトとはコードを再利用するためにある機能で、継承することなく使える)

public function register(Request $request)
{
    /* 中略 */

    return $this->registered($request, $user)
                    ?: redirect($this->redirectPath());
}

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

return文でregisteredメソッドが呼ばれ、偽値だった場合にはredirect関数が呼ばれる。

ここは三項演算子の省略記法であるエルビス演算子が使われている。

エルビス演算子は、条件値がfalseとみなされる値の場合、後者の値が式の結果になる。

registeredメソッドは中身が実装されていない。

つまり、デフォルトでredirect関数が呼ばれるようになっていて、このレスポンスをカスタマイズしたい場合は、トレイトを使っているRegisterControllerでregisterdメソッドを定義して上書きしてしまえばよい。

ログインAPI

I/O設計
(リクエスト)
デフォルト通りemail、passwordを受け取る
(レスポンス)
登録ユーザーの情報を返却

LoginApiTest.phpにテストコード記述

ルート定義

api.phpにルート定義について書いていく

// ログイン
Route::post('/login', 'Auth\LoginController@login')->name('login');
コントローラー

LoginController.phpにauthenticatedメソッドを追加。
理由は会員登録のときと同じパターンなので省略。

ログアウトAPI

I/O設計
(リクエスト)
デフォルト通り、何も受け取らない。
(レスポンス)
ログアウト処理が成功したことがわかればいいので、ステータスコードの200番を返却

LogoutApiTestにテストコード記述

ルート定義

api.phpにルート定義について書いていく

// ログアウト
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');
コントローラー

LoginControllerにloggedoutメソッドを追加。
理由は会員登録、ログインのときと同じパターンなので省略。