Nuxt×Laravel でアプリケーションを作成する際に、バックエンド側のLaravelでValidationを設定する方法を紹介します。
幾つか設定方法がありますが、今回は下記の方法にてValidationを設定していきます。
- Laravel >> FormRequestを作成
- Laravel >> FormRequestのrulesを設定
- Laravel >> FormRequest内で、failedValidationをオーバーライド
- Laravel >> Postリクエスト内にFormRequestを適用
- 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 で受け取ります。