カテゴリー: Webアプリケーション

Nuxt×Laravel でアプリケーションを作成する際に、バックエンド側のLaravelでValidationを設定する方法を紹介します。

幾つか設定方法がありますが、今回は下記の方法にてValidationを設定していきます。

1. Laravel >> FormRequestを作成
2. Laravel >> FormRequestのrulesを設定
3. Laravel >> FormRequest内で、failedValidationをオーバーライド
4. Laravel >> Postリクエスト内にFormRequestを適用
5. Nuxt >> APIレスポンスにて、Validationメッセージを取得

0. 前提

NuxtからのAPIリクエストは axiosを利用しています。axiosに利用方法に関して詳細は省きます。

1. Laravel >> FormRequestを作成

コマンドで生成します。

php artisan make:request PostRequest // PostRequest部分は任意. FormRequestの命名

コマンドによって下記ファイルが生成されます。

server/app/app/Http/Requests/PostRequest.php

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class PostRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return false;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
        ];
    }
}

2. Laravel >> FormRequestのrulesを設定

Validationのrulesを設定していきます。

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class PostRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true; // trueへ変更
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'user_id' => 'required',
            'post_id' => 'required',
        ];
    }
}

'user_id'、'post_id'が必須というシンプルなrulesにしておきます。

3. Laravel >> FormRequest内で、failedValidationをオーバーライド

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class PostRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true; // trueへ変更
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'user_id' => 'required',
            'post_id' => 'required',
        ];
    }

    /**
     * [override] バリデーション失敗時ハンドリング
     *
     * @param Validator $validator
     * @throw HttpResponseException
     * @see FormRequest::failedValidation()
     */    
    protected function failedValidation( Validator $validator )
    {
        $response['data']    = [];
        $response['status']  = 'NG';
        $response['summary'] = 'Failed validation.';
        $response['errors']  = $validator->errors()->toArray();

        throw new HttpResponseException(
            response()->json( $response, 422 )
        );
    }
}

FormRequestファイル内に、failedValidationを追加しました。

これによって、下記のファイル > メソッドをオーバーライドします。

server/app/vendor/laravel/framework/src/Illuminate/Foundation/Http/FormRequest.php > failedValidation()

また、failedValidation()がいつ呼び出されるかというと。下記です。

server/app/vendor/laravel/framework/src/Illuminate/Validation/ValidatesWhenResolvedTrait.php > validateResolved()

4. Laravel >> Postリクエスト内にFormRequestを適用

FormRequestをContollerのメソッドに適用します。

    public function postAction(PostRequest $request) { // 適用
        //省略
        //user_id, post_id が受け取る
    }

apiのroute

server/app/routes/api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;


/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::post('postAction', [任意のController::class, 'postAction']);
    
});

5. Nuxt >> APIレスポンスにて、Validationメッセージを取得

const payload = {
  user_id: XXXX,
  post_id: YYYY,
};
const access_token = ZZZZ;
this.$axios.$post('/api/postAction', payload , { headers: { Authorization: `Bearer ${access_token}` } })
    .then(
      res => {
          console.log(res);
      }
    )
    .catch(error => {
      console.log(error.response.data);
      })

APIリクエスト/レスポンスの処理のみ記載しています。

レスポンスを受け取る際は、error.response で受け取ります。