主要问题是我想通过存根对网站进行全局授权检查。我不太擅长这个。但与此同时,又出现了一个错误,由于我的能力非常弱,无法解决。我失去了在登录页面上输入输入的能力,我已经多次仔细检查了代码,我没有看到任何错误,Google 也没有帮助......我正在附加整个代码:
索引.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter ,createBrowserRouter, RouterProvider,} from "react-router-dom";
import {AuthContext, AuthProvider} from './Components/AuthContext'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<AuthContext.Provider
value={{isLoggedIn: false,
handleLogin: () => {},
balance: 5000,
handleBalance: () => {},
username: '',
handleLoginClick: () => {},
}}>
<App />
</AuthContext.Provider>
</BrowserRouter>
);
应用程序.js
import React from 'react';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navibar from './Components/Navibar';
import Home from './pages/home';
import SignIn from './pages/SignIn';
import SignUp from './pages/SignUp';
import BlackJack from './pages/bj';
import NotFound from './pages/notFound';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { AuthContext } from './Components/AuthContext';
function App() {
const [auth, setAuth] = React.useState(false);
return (
<div className="App">
<Navibar />
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/signIn" element={<SignIn />} />
<Route path="/signUp" element={<SignUp />} />
<Route path="/bj" element={<BlackJack />} />
<Route path="/" element={<NotFound />} />
</Routes>
</div>
)
}
export default App;
登录.jsx
import React , { useState, useContext, useEffect}from "react";
import Button, { ButtonGroup } from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.css';
import { BrowserRouter, Routes, Route, Link, Navigate, useNavigate, useHistory } from 'react-router-dom';
import { AuthContext } from "../Components/AuthContext";
export default function SignIn() {
const { isLoggedIn,
handleLogin,
redirectToHome,
formData,
handleChange,
handleLoginClick,
username,
balance,
handleBalance } = useContext(AuthContext);
return (
<div>
{!isLoggedIn ? (
<div className="form">
<h1>Войти в аккаунт</h1>
<input
className="input"
type="text"
placeholder="Логин"
name="username"
value={formData ? formData.username : ''}
onChange={handleChange}/>
<input
className="input"
type="password"
placeholder="Пароль"
name="password"
value={formData ? formData.password : ''}
onChange={handleChange} />
<Button variant="dark" onClick={handleLoginClick} log>Войти</Button>
<Link className="nav-link" id="signUp" to="/signUp">Еще нет аккаунта?</Link>
</div>
):(
<div>
<h2>Приветствуем тебя, {formData.username}</h2>
</div>
)}
{isLoggedIn && redirectToHome && <Navigate to="/home" />}
</div>
)
}
AuthContext.jsx
import React, { createContext, useContext, useState, useEffect } from "react";
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import SignIn from "../pages/SignIn";
export const AuthContext = createContext(null)
export const AuthProvider = ({ children }) => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [username, setUsername] = useState('');
const [formData, setFormData] = useState({
username: '',
password: ''
});
const [redirectToHome, setRedirectToHome] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prevFormData => ({
...prevFormData,
[name]: value
}));
};
const handleLoginClick = () => {
handleLogin(formData.username, formData.password);
setRedirectToHome(true);
};
const handleLogin = (username, password) => {
console.log(username, password);
if (username === 'admin' && password === 'admin') {
setIsLoggedIn(true);
setUsername(username);
} else {
alert('Неправильное имя пользователя или пароль');
}
};
const [balance, setBalance] = useState(5000);
const handleBalance = () => {
setBalance(balance - 100);
}
return (
<AuthContext.Provider value={{ isLoggedIn, handleLogin, balance, handleBalance }}>
{children}
</AuthContext.Provider>
);
};
主页.jsx
import React , { useState, useContext, useEffect}from "react";
import SexButton from "../UI/SexButton";
import './styles.css';
// import ManePage from "../img/ManePage.jpg"
import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';
import { AuthContext } from "../Components/AuthContext";
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
export default function Home() {
const { isLoggedIn, balance, handleBalance, username } = useContext(AuthContext);
return (
<div>
{isLoggedIn ? (
<div>
<span id="welcome">Добро пожаловать, {username}!</span>
<span id="balance">Balance: {balance} $</span>
<Button variant="primary" onClick={handleBalance}>Поставить деньги</Button>
</div>
) : (
<span id="welcome">Мы бы сказали тебе привет, если бы ты вошел в аккаунт</span>
)}
<h1>Главная страница</h1>
<img src={require('../img/ManePage.jpg')} alt="" width='100%'/>
<SexButton />
</div>
)
}
如果代码中的其他错误被指出,我也会很高兴。
在输入中使用defaultValue代替值