[英]Can I protect certain page in PWA with a pin code?
I'm building a PWA for a restaurant and I need to protect certain pages with a pincode or password.我正在为一家餐厅构建 PWA,我需要使用 pin 码或密码来保护某些页面。 Platform: Safari, iPads.平台:Safari,iPad。
The app itself has only 2 views:该应用程序本身只有 2 个视图:
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)?例如,如何限制客户返回主屏幕,其中所有表格都带有 pin 码或将在工作开始时设置的密码 session(当服务员进行身份验证时)?
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.虽然在mounted中可以自动设置。 You can adjust the code to your own needs.您可以根据自己的需要调整代码。
You can use session storage in JavaScript to store the password and check it whenever a client tries to access the main screen.您可以使用 JavaScript 中的 session 存储来存储密码,并在客户端尝试访问主屏幕时检查它。 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.此代码设置密码“1234”,并在每次客户端尝试访问主屏幕时检查它。 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.您可以将此代码添加到表格点击或密码输入表单的事件处理程序中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.