vue-router에서 1개 이외의 모든 루트를 잠글 수 있습니까?안전한가요?아니면 다른 방법을 써야 할까?

vue-router에서 1개 이외의 모든 루트를 잠글 수 있습니까?안전한가요?아니면 다른 방법을 써야 할까?

온라인 시험을 만들고 싶은데, 이 시험은 5페이지, 카운트다운 타이머(120초), 각 페이지에 4문항이 있습니다.120초 후에 사용자는 자동으로 다음 페이지로 이동하거나 그 전에 다음 버튼을 클릭할 수 있습니다.

Laravel 5.4 및 VueJs, 사용자가 답변하는 모든 질문에 대해 Ajax 요청이 있습니다.제가 원하는 것은 사용자가 다른 페이지를 볼 수 없도록 하는 것입니다.각 페이지는 최대 120초 동안 표시되어야 합니다.사용자는 뒤로 버튼을 클릭하여 이전 페이지를 볼 수 없습니다.이게 가능합니까?

이 앱을 만들고 싶다Vuejs그리고.vue-router어떻게 구현해야 할지 모르겠습니다.vue-router조사를 좀 해봤지만 별로 성과가 없었어!

아니면 제가 이걸 쓰면 안 될 것 같아요.vue-router다음과 같은 간단한 라우터를 사용합니다.

$("#page1").show();
$("#page2").hide();
$("#page3").hide();
.
.
// after 120 secs 
$("#page1").hide();
$("#page2").show();
$("#page3").hide();
.
.
 // i think this is not secure !

어떤 의견이라도 감사합니다.감사합니다.

업데이트: 이 테스트에서 사용자는 다음 목록을 볼 수 있습니다.English words에서 무작위로 선택되다words테이블 말고는 아무것도 없어!사용자는 자신이 의미를 안다고 생각하는 모든 단어를 클릭한다!그리고 클릭할 때마다 Ajax 요청으로 단어 ID를 저장합니다.results테이블도 있고fake_words50단어 랜덤 테이블이 선택됩니다.actual words사용자가 가짜 단어를 3번 이상 클릭하면 테스트가 실패합니다.최종 결과는 사용자에게 그가 얼마나 많은 어휘력을 가지고 있는지 알려줄 것입니다.

업데이트 2: 이 작업을 수행하려고 했습니다.vue-router하지만 코드화를 시작하기 전에, 저는 이 코드가 다음과 같이 구현되어서는 안 된다고 생각했습니다.vue-router모든 질문이 DB에서 무작위로 하나의 쿼리로 수신되고, 시험이 시작되기 전에 모든 질문이 브라우저로 전송(ajax)됩니다. 이제 어떻게 해야 합니까?그것들을 다른 배열로 분할하여 각 배열의 질문을 내 페이지 중 하나에 전송하시겠습니까?꼭 그래야 하나요? 하나만 쓰면 안 되나요?v-for그들을 위해?만약 내가 질문의 수를 바꾸기로 결정한다면?그러면 매번 코드를 터치해서 새로운 페이지를 만들어야 할 것 같아요.vue-router또는 페이지 중 하나를 제거합니다.

이것이 시험과 같은 위험성이 높은 코드라면, 「클라이언트를 신뢰하지 않는다」라고 하는 접근방식을 재검토할 필요가 있습니다.당신의 문제를 해결하기 위해 백엔드에 코드를 쓸 것을 제안합니다.

1) 다음과 같은 미들웨어로 엔드포인트를 보호합니다.

2) 페이지 방문 시 타임스탬프 작성

3) 120초 후 사용자로부터의 새로운 투고(답변)를 받지 않는다.

주의: 온라인에서도 답변해 주셨으면 합니다.그 외 보안은 확보되지 않습니다.브라우저 창에 질문을 넣으면 최상의 코드를 사용하여도 항상 이 질문을 캐싱할 수 있습니다.

편집: 페이지 번호부여를 사용하여 시간제한을 두고 질문을 하나씩 보냅니다.

edit 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);

보안에 관한 한 JS 프레임워크의 선택은 거의 영향을 미치지 않습니다.Vue.js는 훌륭한 선택입니다.다음은 시작하는 데 도움이 되는 샘플 코드입니다.

<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>

서버 측에서는 다음과 같은 방법을 권장합니다.

1. 클라이언트에 요청당 질문 1개 전송
2. API가 다음 질문을 클라이언트에 반환하기 전에 사용자가 이전 질문에 답변했는지 또는 질문에 답변할 수 있는 기간이 만료되었는지 확인하십시오.이것은 매우 간단하게 실시할 수 있습니다.데이터스토어에 카운터를 보관하고, 유저 마다 마지막에 회답한(또는 기한이 만료된) 질문 번호를 기록합니다.사용자는 레코드에 기재된 번호 이하의 질문 번호에 대답할 수 없습니다.서버는, 레코드내의 번호보다 1 큰 질문 번호만을 송신할 필요가 있습니다.

샘플 코드(Larabel 5 구문은 확실하지 않지만 아이디어를 얻어야 합니다):

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();
});    

언급URL : https://stackoverflow.com/questions/45244566/is-it-possible-to-lock-all-routes-except-one-in-vue-router-is-it-secure-or-m