我可以使用 pin 碼保護 PWA 中的特定頁面嗎？

Question

這個賞金已經結束了。 此問題的答案有資格獲得+200聲望賞金。 賞金寬限期在2 小時后結束。 mef_正在尋找規范的答案：

我想通過密碼/密碼保護應用程序中的一個視圖。 打開視圖后，如果不輸入密碼/密碼，用戶應該無法 go 到上一個視圖。

我正在為一家餐廳構建 PWA，我需要使用 pin 碼或密碼來保護某些頁面。 平台：Safari，iPad。

該應用程序本身只有 2 個視圖：

• 顯示所有表
• 顯示特定表的賬單

當服務員點擊一張桌子時，它會顯示一張賬單，然后將賬單交給客戶。 例如，如何限制客戶返回主屏幕，其中所有表格都帶有 pin 碼或將在工作開始時設置的密碼 session（當服務員進行身份驗證時）？

Answer 1

您可以使用路由器中間件來防止客戶端導航到其他地方。

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

這是一個例子，服務員可以在選擇賬單后鎖定頁面。 雖然在mounted中可以自動設置。 您可以根據自己的需要調整代碼。

小提琴

Answer 2

您可以使用 JavaScript 中的 session 存儲來存儲密碼，並在客戶端嘗試訪問主屏幕時檢查它。 這是代碼：

// 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”，並在每次客戶端嘗試訪問主屏幕時檢查它。 如果輸入的密碼不正確，將顯示警報並且客戶端將無法訪問主屏幕。 如果密碼正確，客戶端將被重定向到主屏幕。

您可以將此代碼添加到表格點擊或密碼輸入表單的事件處理程序中。