48 lines
1.3 KiB
React
48 lines
1.3 KiB
React
import {useState} from 'react';
|
||
import {useNavigate} from 'react-router-dom';
|
||
|
||
import './Login.css';
|
||
|
||
import axios from 'axios';
|
||
|
||
|
||
export default function Login() {
|
||
const [username, setUsername] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const navigate = useNavigate();
|
||
const handleSubmit = async e => {
|
||
e.preventDefault();
|
||
try {
|
||
const resp = await axios.post(
|
||
'https://api.rop.cc/auth',
|
||
{username, password},
|
||
{withCredentials: true}
|
||
);
|
||
console.log('接收到resp：', resp);
|
||
// 假设后端返回 { token: 'xxxx' } 保留本地token
|
||
// localStorage.setItem('jwt', resp.data.token);
|
||
// localStorage.setItem('_uname', resp.data.username);
|
||
// 跳转到首页或登录前尝试访问的页面
|
||
navigate('/', {replace: true});
|
||
} catch (err) {
|
||
console.log(err)
|
||
alert(`[[Login failed]] error = ${err}`);
|
||
}
|
||
};
|
||
return (<form className="login" onSubmit={handleSubmit}>
|
||
<h2>Login</h2>
|
||
<input
|
||
value={username}
|
||
onChange={e => setUsername(e.target.value)}
|
||
placeholder="username"
|
||
/>
|
||
<input
|
||
type="password"
|
||
value={password}
|
||
onChange={e => setPassword(e.target.value)}
|
||
placeholder="password"
|
||
/>
|
||
<button type="submit">submit</button>
|
||
</form>);
|
||
}
|