如何創建一個簡單的受密碼保護的 React 應用程序？ 每個人都可以在會議或活動中使用的單一密碼

Question

正如標題所暗示的，你如何創建一個受密碼保護的 React 網站？ 除此之外沒有什么特別的。 每個人都可以訪問相同的密碼，無需做任何超級安全的事情，只需訪問 React 應用程序上的內容即可。

這對我來說是新的，所以我不確定要采取的正確步驟。 這只是為了保護前端的內容，不需要超級安全，主要是為了確保我們在活動進行時清除任何真正未經授權的訪問。

Answer 1

您可以將密碼檢查邏輯添加到您的登錄組件。 這里有一些想法

選項 1：使用庫，請參閱react-app-protect

• 注意：目前僅適用於 React 17 或更低版本

選項 2：使用輸入 + DOM 元素搜索

import React, { useState } from "react";

const Login = () => {
  const [isVerified, setIsVerified] = useState(false);

  const checkPw = () => {
    // gets the current input value
    const answer = document.getElementById("password").value;
  
    if (answer === "yourSecretPassword") { 
      setIsVerified(true);
    } else {
      alert("Sorry, that's not it");
    }
  };

 return (
  <>
  {isVerified ? <YourApp />
    :
   (
    <form onSubmit={checkPw}>
     <input id="password" name="password" />
     <button>open sesame</button>
    </form>
  )
}
  </>
;

^ 這很糟糕，但聽起來您並不擔心最佳實踐。