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.phpとphpunit.xmlを編集。
会員登録API
I/O設計 Input(リクエストデータ)とOutput(レスポンス)を設計する。
(リクエスト)
デフォルト通りに、name、email、password、password_confirmationを受け取る。
(レスポンス)
登録成功後は登録ユーザーの情報を返却。
返却されたユーザーデータをフロントエンドで保存しておいて、認証状態のチェックに使える
テストコード
assertStatusメソッドは、返されたレスポンスが指定したHTTPステータスコードを持っていることをアサートする。
assertJsonメソッドは、レスポンスを配列に変換し、JSONレスポンスの中に、指定された配列があるか確認する。
ルート定義
// 会員登録
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メソッドを定義して上書きしてしまえばよい。