Can I protect certain page in PWA with a pin code?

Question

. 。 Answers to this question are eligible for a +200 reputation bounty. Bounty grace period ends in 2 hours . mef_ is looking for a : ：

I want to protect one of the views in the app by password/pincode. After the view is opened, the user should not be able to go to the previous view without entering the password/pincode.

I'm building a PWA for a restaurant and I need to protect certain pages with a pincode or password. Platform: Safari, iPads.

The app itself has only 2 views:

• show all tables
• show the bill of a specific table

When a waiter clicks a table it will show a bill that then will be handed over to the client. How can I restrict a client from going back to the main screen with all tables with a pin code or a password that will be set at the beginning of the work session, for example (when the waiter authenticates)?

Answer 1

You can use a router middleware to prevent the client to navigate elsewhere.

router.beforeEach(function(to, from, next) {
    if (isLocked) {
        alert('Navigation is locked');
        next(false);
    } else {
        next();
    }
});

Here is an example where the waiter can lock the page after selecting the bill. Although it can be automatically set in mounted. You can adjust the code to your own needs.

Jsfiddle

Answer 2

You can use session storage in JavaScript to store the password and check it whenever a client tries to access the main screen. Here's the code:

// setting the password
sessionStorage.setItem('password', '1234');

// checking the password
const password = sessionStorage.getItem('password');
if (inputPassword !== password) {
alert('Incorrect password');
return;
}

// redirecting to the main screen
window.location.href = '/main-screen';

This code sets a password of '1234' and checks it every time a client tries to access the main screen. If the input password is incorrect, an alert will be shown and the client will not be able to access the main screen. If the password is correct, the client will be redirected to the main screen.

You can add this code in the event handler of the table click or the password input form.