是否可以在vue路由器中锁定除一条之外的所有路由?它安全吗?或者我应该用另一种方法?

如果这真的是像考试这样的高风险代码,你应该重新考虑你的方法:“ Never trust the client “。我建议为后端编写代码来解决您的问题。

1) 使用中间件保护端点,即:

2) 在访问页面时创建时间戳

注意:我希望他们也必须在线回答,否则就不安全了:如果问题放在浏览器窗口中,他们可以始终缓存这个问题,即使有最好的代码,他们也可以在屏幕上拍照。

编辑: pagination

编辑2: 当devtools打开时,我还会向服务器发送通知。你可以试试 https://github.com/sindresorhus/devtools-detect

const app = new Vue({
    el: '#app',
    data: {
        stepOne: 1,
    }
});

<step v-if="step==1"></step>

timeInterval = setInterval(function() {
    goToNextStep(2);
    this.$parent.stepOne = 0;
}.bind(this), 12000);

<template>
  <div>
    <div id="question" v-if="question">
      {{question}}
      <button @click="nextQuestion();" v-if="hasNextQuestion()"></button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        curQuestionNo: 0,
        maxQuestions: 4
        question: null,
        timer: null
      }
    },
    methods: {      
      fetchQuestion () {
        // return one question at a time from the server. Storing all questions on the client is not recommended.
        var url = 'https://myapi.com/question?curQuestionNo=' + this.curQuestionNo;

        axios.get(url) // or however you prefer to make ajax calls
          .then(res => {
            this.question = res.question;
            this.curQuestionNo++;
            this.stopTimer();
            if(this.hasNextQuestion()) {
              this.startTimer();
            }
          })
          .catch(() => {
            // do some error handling
          });
      },
      startTimer () {
        this.timer = setTimeout(() => {
          this.nextQuestion();
        }, 120 * 1000);
      },
      stopTimer () {
        clearTimeout(this.timer);
      },
      nextQuestion () {
        if(this.curQuestionNo > 0) {
          this.markAnswered(function() {  
            this.fetchQuestion();
          })
        } else {
          this.fetchQuestion();
        }
      },
      markAnswered (cb) {
        // record the answered question on server
        // server should only send the next question after this
        var url = 'https://myapi.com/mark-complete?curQuestionNo=' + this.curQuestionNo;

        axios.post(url) 
          .then(res => {
            this.fetchQuestion();
          })
          .catch(() => {
            // do some error handling
          });
      },
      hasNextQuestion () {
        return this.maxQuestions - (this.curQuestionNo + 1) > 0;
      }
    },
    created () {
      this.nextQuestion();      

    }
  }
</script>

在服务器端,我建议采用以下方法:

2. 在API将下一个问题返回给客户端之前,请确保用户已回答了上一个问题,或者允许回答该问题的时间范围已过期。这可以很简单地实现,只需在数据存储中保留一个计数器,以记录每个用户上次回答(或过期)的问题编号。不应允许用户回答等于或小于记录中数字的问题。服务器只应发送比记录中的数字大一的问题编号。

Route::get('question', function(){
    $curQuestionNo = intVal(Input::get('curQuestionNo'));
    $user = User::find($userId); // get the logged in user, for example
    if($user->current_question_number === $curQuestionNo) {
      $question = Question::where('question_no', $curQuestionNo + 1);
      $question->sent_at = time(); // store the time when the question was sent
      return $question
    } else {
      // deny access
    }
});

Route::post('mark-complete', function(){
    $curQuestionNo = intVal(Input::get('curQuestionNo'));
    $user = User::find($userId); // get the logged in user, for example
    $question = Question::find($curQuestionNo);
    if($question->sent_at > 120 seconds) {
     // do not record answers
    } else {
      // record answers
    }
    $user->current_question_number = $curQuestionNo;
    $user->save();
});