ユーザーごとに１日１回クイズに回答できる処理を作りたい【Laravel】

現在LaravelとVueでクイズサービスを作っていて１日１回回答できる機能を作ろうとしていますが、どうにもやり方がわかりません。

Laravelのthrottleを使って制限をかける方法があるのは分かるのですが、使い方がわからないです。
ルーティングの処理でapi.phpに

Route::middleware('auth:api', 'throttle:60,1')->group(function() {
 　コントローラーでの１日１回の制限の処理
})

このような使い方で合っているのかもわかりませんでした。

そもそもthrottleで実装できるものなのか？よければお力添えをお願いします。

api.php

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| 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::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});


Route::group(['middleware' => ['api']], function () {
    Route::get('quiz', 'Api\QuizController@show'); 
  });

Home.vue（クイズボタンがあり押すとクイズページに遷移する）

<template>

  <div class="container is-fullhd">
      
      </main>

      <div class="container">
        <div class="notification">
          <div class="columns">
            <div class="column">
   
                 <section class="home-quiz__day">
                  <br/>
                  <h2 class="title is-4">今日のクイズ</h2>
                    <div>
                      <form>
                        <button @click.stop.prevent="goQuiz()" class="button is-info is-centered">クイズ</button>
                      </form>
                    </div>
          
                 </section>
      
            </div>
          </div>
        </div>
      </div>
  </main>

</div>
  
   

</template>


<script>

export default {

  methods: {
    goQuiz() {
      this.$router.push("/quiz");
    },
    
};
</script>

QuizController.php(ここに1日１回の処理を書くのか)

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

use App\Quiz;

class QuizController extends Controller
{
    public function show()
    {
      $quiz = cache('quiz');

      return $quiz;
    }
}

Quiz.vue

<template>

  <div class="container is-fullhd">

      <main>

      <div class="container">
        <div class="notification">
          <div class="columns">
          <div class="card">
          <div class="card-content">
            <div class="column">
            　  <section>
                  <h2 cclass="title is-4">
                    問題
                  </h2>
                <p>{{ title }}</p>
                  <div class="quiz-answer__list">
                  <ul>
                  <li v-for="(answer, index) in answers" :key="index">
                  <a>
                    <button
                      @click="goAnswer(index + 1)"
                      :disabled="isAlreadyAnswered"
                      class="button is-light is-fullwidth"
                    >{{ index + 1 }}</button>
                  </a>
                  {{ answer }}
                </li>
              </ul>
                  </div>
                
                </section>
                 <section>
                  <h2 class="title is-4">
                  正解
                </h2>
                <p>
                  <button
                    class="quiz-correct-answer button is-light is-fullwidth"
                    v-show="isAlreadyAnswered"
                    disabled
                  >{{ correctAnswerNo }}</button>
                </p>
                <button @click="goAnswer(0)" v-show="!isAlreadyAnswered">正解を表示する</button>
                  <div class="alert alert-info" v-show="isCorrect">
                    <strong>正解です</strong>
                  </div>
                  <div class="alert alert-danger" v-show="isMistake">
                    <strong>間違っています！</strong>
                  </div>
                  <div
                    class="quiz-commentary__text"
                    v-show="isAlreadyAnswered"
                    style="white-space:pre-wrap; word-wrap:break-word;"
                    >{{ commentary }}</div>


                  <button
                    type="button"
                    data-toggle="modal"
                    data-target="#modal-result"
                    class="center-block"
                    v-show="isQuizFinish"
                    @click="showResult"
                  >結果を見る</button>
                  <button class="button is-info is-centered">クイズ一覧</button>
                 </section>
            </div>
            </div>
            </div>
            <div class="submenu column is-4">
              <the-sidebar></the-sidebar>
            </aside>
            </div>
          </div>
        </div>
      </div>
  </main>

  <the-modal :correctPercentageObject="correctPercentageObject" ref="modal" ></the-modal>


</div>
  
   

</template>

<script>

import TheSidebar from "../layout/TheSidebar";
import TheModal from "../module/TheModal";

export default {
  components: {
    TheSidebar,
    TheModal,
  },
  
  mounted() {
    this.getQuiz();

   },
   data() {
    return {
      quizData: [],
      title: "",
      imageSrc: "",
      answers: [],
      commentary: "",
      correctAnswerNo: 0,
      isCorrect: false, //正解かどうか
      isMistake: false, //間違いかどうか
      isAlreadyAnswered: false, //回答済みかどうか
      isQuizFinish: false, //クイズが終了したかどうか
      score: 0,
      quizNumber: 1,
      correctPercentageObject: {}
    };
  },
   methods: {
     getQuiz() {
      this.$http.get('/api/quiz')
      .then(res => {
        this.quizData = res.data
        const quiz = this.quizData[0]
        this.title = quiz.title
        this.imageSrc = quiz.image_src
        this.answers = [
        this.quizData[0].answer.answer_1,
        this.quizData[0].answer.answer_2,
        this.quizData[0].answer.answer_3,
        this.quizData[0].answer.answer_4
      ];
        this.commentary = this.quizData[0].answer.commentary;
        this.correctAnswerNo = this.quizData[0].answer.correct_answer_no;
        console.log(this.quizData);
      })
     },


     goAnswer(selectAnswerNum) 
     {
       if (selectAnswerNum === 0) {
        this.isCorrect = false;
        this.isMistake = false;
      } else if (selectAnswerNum === Number(this.correctAnswerNo)) {
        // 正解を押した場合 alert-infoを表示し、alert-dangerを非表示にする そしてスコアを加算する
        this.isCorrect = true;
        this.isMistake = false;
        this.score += 1;
      } else {
        // 不正解の場合 alert-infoを非表示し、alert-dangerを表示にする
        this.isMistake = true;
        this.isCorrect = false;
      }

      this.isAlreadyAnswered = true;
      if (this.quizNumber >= 1) {
        this.endQuiz();
        console.log(this.endQuiz());
      }

     },

     endQuiz() {
      this.isQuizFinish = true;
      this.answerNo = "-";
      this.isAlreadyAnswered = true;

      this.correctPercentageObject = {
        correctScore: this.score,
        mistakeScore: 10 - this.score
      };
    },
     showResult() {
      this.$refs.modal.render();
    }
   }

};
</script>

行動規範の内容に同意します

回答1件

ベストアンサー

Laravelのthrottleですが、おそらくper minute的な使い方に最適化されていて、per dayのような使い方は想定されていないかもしれません。そのまま使うなら1日1440分なので

Route::middleware('auth:api', 'throttle:1,1440')->group(function() {
 　コントローラーでの１日１回の制限の処理
})

みたいな感じで使うのではないでしょうか（こういう使い方したことないので、実際にちゃんと動くかはわかりませんが）。Laravelのソースコードを見るとユーザ認証をしているときとそうでないときで処理が変わるようです。ユーザ認証していない場合はIPアドレスとドメインのハッシュを使うようで、それが要件に合っているのかどうかはご自分で判断してください。

参考）
https://github.com/illuminate/routing/blob/master/Middleware/ThrottleRequests.php#L160

もっともユーザ認証しているならthrottleを使わずにSessionやCookieなどを使う違う実装方法もあると思います。

投稿2021/04/29 10:33

編集2021/04/29 10:55