Can I restrict access to all routes except one in vue-router? Is this a safe practice? Should I explore alternative methods for achieving this?

Question

Can I restrict access to all routes except one in vue-router? Is this a safe practice? Should I explore alternative methods for achieving this?

I am looking to create an online exam consisting of 5 pages, each with a countdown timer set at 120 seconds and 4 questions on each page. Once the timer runs out, users will be automatically redirected to the next page, or they can manually click the "next" button before that.

Utilizing Laravel 5.4 and VueJs, I have implemented an Ajax request for every question answered by the user. However, my main goal is to prevent users from navigating back to previous pages or viewing other pages until the designated time limit has elapsed. Is this even feasible?

My plan is to develop this application using Vuejs and vue-router, although I am unsure about how to integrate this functionality using vue-router. Despite conducting research, I haven't found much information regarding this particular issue!

Alternatively, should I consider abandoning vue-router and just implement a simple router of my own, like:

$("#page1").show();
$("#page2").hide();
$("#page3").hide();
.
.
// after 120 secs 
$("#page1").hide();
$("#page2").show();
$("#page3").hide();
.
.
 // Nevertheless, I believe this approach may not provide adequate security!

Any insights or suggestions would be highly valued. Thank you in advance.

UPDATE: This exam allows users to view a list of randomly chosen English words sourced from the words table exclusively! Users then proceed to click on any word whose meaning they know, triggering an ajax request for each selection to save the word's ID in the results table. Additionally, there exists a fake_words table wherein 50 random words are selected alongside genuine ones. If a user clicks on fake words more than 3 times, the test will result in failure. The final outcome will reveal the user's vocabulary proficiency level.

UPDATE 2: Although I attempted to implement this functionality using vue-router, I realized that all questions are randomly fetched from the database in one query, sent (via ajax) to the browser before the exam commences. This begs the question - should I segregate them into separate arrays and allocate each array to a distinct page? Do I have no choice but to do so? Can't I simply use a single v-for loop for all questions? Suppose I opt to modify the number of questions; would this necessitate manual code updates and creating new vue-router pages or removing existing ones?

javascript vue.js vuejs2 vue-router

Answer 1

Answer №1

If you are dealing with high-risk code, such as an exam, it is important to reassess your approach: "Never trust the client". Consider implementing backend solutions to address potential security issues.

1) Secure the endpoint using middleware that:

2) Generates a timestamp when the page is visited

3) Prevents users from submitting a new post (answer) after 120 seconds

Note: It's essential for users to answer online as well for better security. If the question is displayed in the browser window, users can always cache it and even take screenshots regardless of encryption measures.

edit: Utilize pagination to present questions one at a time within a specific timeframe.

edit 2: Implement a feature to send a notification to the server if devtools are opened. Check out https://github.com/sindresorhus/devtools-detect

Answer 2

If you are dealing with high-risk code, such as an exam, it is important to reassess your approach: "Never trust the client". Consider implementing backend solutions to address potential security issues.

1) Secure the endpoint using middleware that:

2) Generates a timestamp when the page is visited

3) Prevents users from submitting a new post (answer) after 120 seconds

Note: It's essential for users to answer online as well for better security. If the question is displayed in the browser window, users can always cache it and even take screenshots regardless of encryption measures.

edit: Utilize pagination to present questions one at a time within a specific timeframe.

edit 2: Implement a feature to send a notification to the server if devtools are opened. Check out https://github.com/sindresorhus/devtools-detect

Answer 3

Answer №2

Maybe these code snippets could provide some assistance:

let application = new Vue({
    element: '#application',
    data: {
        firstStep: 1,
    }
});

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

timeHandler = setInterval(function() {
    moveForwardToNextStep(2);
    this.$parent.firstStep = 0;
}.bind(this), 12000);

Answer 4

Maybe these code snippets could provide some assistance:

let application = new Vue({
    element: '#application',
    data: {
        firstStep: 1,
    }
});

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

timeHandler = setInterval(function() {
    moveForwardToNextStep(2);
    this.$parent.firstStep = 0;
}.bind(this), 12000);

Answer 5

Answer №3

When it comes to security, the choice of a JS framework may not have a significant impact. Vue.js is a solid option for development. Here's a snippet of code to help you get started:

<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 () {
        var url = 'https://myapi.com/question?curQuestionNo=' + this.curQuestionNo;

        axios.get(url)
          .then(res => {
            this.question = res.question;
            this.curQuestionNo++;
            this.stopTimer();
            if(this.hasNextQuestion()) {
              this.startTimer();
            }
          })
          .catch(() => {
            // handle errors here
          });
      },
      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) {
        var url = 'https://myapi.com/mark-complete?curQuestionNo=' + this.curQuestionNo;

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

    }
  }
</script>

For server-side implementation, consider the following approach:

Send one question at a time per request to the client.
Ensure that the user has answered the previous question or the allowed time has expired before returning the next question. Keep track of the last answered question number (or expiry time) per user in the data store. The server should only send the next question after verifying this information.

Sample Code:

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

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

Answer 6

When it comes to security, the choice of a JS framework may not have a significant impact. Vue.js is a solid option for development. Here's a snippet of code to help you get started:

<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 () {
        var url = 'https://myapi.com/question?curQuestionNo=' + this.curQuestionNo;

        axios.get(url)
          .then(res => {
            this.question = res.question;
            this.curQuestionNo++;
            this.stopTimer();
            if(this.hasNextQuestion()) {
              this.startTimer();
            }
          })
          .catch(() => {
            // handle errors here
          });
      },
      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) {
        var url = 'https://myapi.com/mark-complete?curQuestionNo=' + this.curQuestionNo;

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

    }
  }
</script>

For server-side implementation, consider the following approach:

Send one question at a time per request to the client.
Ensure that the user has answered the previous question or the allowed time has expired before returning the next question. Keep track of the last answered question number (or expiry time) per user in the data store. The server should only send the next question after verifying this information.

Sample Code:

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

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

Can I restrict access to all routes except one in vue-router? Is this a safe practice? Should I explore alternative methods for achieving this?

Answer №1

Answer №2

Answer №3

Similar questions

Effective approach for incorporating external stylesheets and additional resources in Vue

Scrolling to top using jQuery - Problem with incorrect anchor

Navigating with React Router using URL parameters

How can the background of a div be altered when text is typed into an input field?

A guide to showcasing JSON data on a webpage using JavaScript

Should WordPress files be kept separate (php, css, and js) or combined into a single file?

What is the best way to alternate $httpBackend when[method] declarations in unit tests to handle multiple requests?

Utilizing Vue's shorthand syntax for interpolation within attributes allows for a more concise and efficient

Learn the trick to make this floating icon descend gracefully and stick around!

Viewing HTML web pages using Mozilla Firebox

Steps for retrieving a Unicode string from PHP using AJAX

Refresh the content with an embedded iframe

Troubleshooting: Issues with Custom Image Loader in Next.js Export

Extracting and transforming an array into a list with the desired outcome

How to initiate a refresh in a React.js component?

Ways to stop CKEDITOR from automatically saving textarea or contenteditable content

Issues with PHP not properly accepting JSON data sent via Ajaxor

Error: The property 'getClientRects' cannot be read because it is null

Meta tag information from Next.js not displaying properly on social media posts

jQuery floating sidebar that dynamically adjusts position based on content overflow