Is it Possible to lock all routes except one, in vue-router ? Is it secure? Or maybe I should use another method?

Question

I want to build an online exam, this exam has 5 pages, there is a count down timer (120 seconds) and 4 questions on each page. After 120 seconds users are automatically transferred to the next page, or they can click on next button before that.

Laravel5.4 and VueJs, There is an Ajax request for every question that user answers. What I want is preventing the user from seeing other pages. Each page has to be visible for maximum 120 seconds. The user should not be able to click on back button and see previous pages. Is this possible at all?

I want to create this app with Vuejs and vue-router but I don't know how to implement this with vue-router, I have done some research but got not much result!

Or maybe I should not use vue-router, and use my own simple router, for example :

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

Any thoughts are appreciated. Thank you.

UPDATE: In this exam, user can see a list of English words randomly selected from words table and nothing else! The user clicks on every word he thinks he knows its meaning! And an ajax request for every click to save the id of the word in results table. Also, There is a fake_words table that is 50 words randomly is selected in addition to actual words if the user clicks on fake words more than 3 times, the test will fail. The final result will tell the user how much vocabulary skill he has.

UPDATE 2: I tried to do this with vue-router, but before starting to code, I thought maybe it should not be implemented with vue-router because all questions randomly get from DB in one query, then before exam starts, all of them are send (ajax) to the browser, now what should I do? Slice them in separate arrays and send each array of questions to one of my pages? do I have to do that? can not I use only one v-for for them? what if I decide to change number of questions? Then I think I have to touch my code every time and create new page for vue-router or remove one of pages.

Answer 1

If this is really high risk code like an exam you should reconsider your approach: "Never trust the client". I would suggest writing code for the backend to solve your issue.

1) Protect the endpoint with middleware, that:

2) creates a timestamp on visit of the page

3) Does not accept a new post (answer) from the user after 120 seconds

Note: I hope they have to answer online as well, otherwist it can't be secured: if the question is put in the browser window, they can cache thist question always, even with the best code they can take a picture of the screen.

edit: I would use pagination to send the questions 1 by one with a time limit.

edit 2: I would also sent a notice to the server when the devtools are opened. You can try https://github.com/sindresorhus/devtools-detect

Answer 2

Perhaps this snippets will help:

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