reactjs - 如何创建一个简单的受密码保护的 React 应用程序？ session 或事件中的每个人都会使用的单一密码

Question

正如标题所示，如何创建受密码保护的 React 网站？除此之外没有什么特别的。每个人都可以访问相同的密码，无需执行任何 super 安全的操作，只需访问 React 应用程序上的内容即可。

这对我来说是新的，所以我不确定采取正确的步骤。这只是为了保护前端的内容，并且不需要 super 安全，主要是为了确保我们在事件进行时清除任何真正未经授权的访问。

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>
  )
}
  </>
;

^ 这相当简陋，但听起来您并不担心最佳实践。