我可以使用 pin 码保护 PWA 中的特定页面吗？答案

【问题标题】：Can I protect certain page in PWA with a pin code?我可以使用 pin 码保护 PWA 中的特定页面吗？
【发布时间】：2023-01-30 16:14:12
【问题描述】：

我正在为一家餐厅构建 PWA，我需要使用 pin 码或密码来保护某些页面。平台：Safari、iPad。

该应用程序本身只有 2 个视图：

显示所有表格
显示特定表的账单

当服务员点击一张桌子时，它会显示一张账单，然后将账单交给客户。例如，如何限制客户返回主屏幕，其中所有表格都带有 pin 码或密码，这些密码或密码将在工作会话开始时设置（当服务员进行身份验证时）？

【问题讨论】：

实际上@soresu 是完全正确的。您可以将“isLocked”模式默认设置为 true，如果处于锁定模式，这将停止导航。该值可以通过在弹出窗口或类似窗口上验证来更改 pin 验证。一旦通过验证，服务员就可以导航到他喜欢的地方，直到他锁定为止。

标签： vue.js safari progressive-web-apps

【解决方案1】：

您可以使用路由器中间件来防止客户端导航到其他地方。

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

这是一个例子，服务员可以在选择账单后锁定页面。虽然在mounted中可以自动设置。您可以根据自己的需要调整代码。

Jsfiddle

【讨论】：

【解决方案2】：

您可以使用 JavaScript 中的会话存储来存储密码，并在客户端尝试访问主屏幕时检查它。这是代码：

// 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';

此代码设置密码“1234”，并在每次客户端尝试访问主屏幕时检查它。如果输入的密码不正确，将显示警报并且客户端将无法访问主屏幕。如果密码正确，客户端将被重定向到主屏幕。

您可以将此代码添加到表格点击或密码输入表单的事件处理程序中。

【讨论】：