使用简单的硬编码密码保护react组件

import React, { useState } from 'react';

const PasswordProtectedComponent = () => {
  const [password, setPassword] = useState('');
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleLogin = () => {
    // 硬编码的密码验证
    if (password === 'your_password') {
      setIsAuthenticated(true);
    } else {
      alert('密码错误');
    }
  };

  return (
    <div>
      {!isAuthenticated ? (
        <div>
          <input type="password" value={password} onChange={handlePasswordChange} />
          <button onClick={handleLogin}>登录</button>
        </div>
      ) : (
        <div>
          {/* 受保护的组件内容 */}
          <h1>受保护的组件</h1>
          <p>这是一个受密码保护的React组件。</p>
        </div>
      )}
    </div>
  );
};

export default PasswordProtectedComponent;

import React from 'react';
import PasswordProtectedComponent from './PasswordProtectedComponent';

const App = () => {
  return (
    <div>
      <h1>应用程序</h1>
      {/* 其他组件内容 */}
      <PasswordProtectedComponent />
    </div>
  );
};

export default App;