|
|
@@ -0,0 +1,154 @@
|
|
|
+import React, { useState, useEffect } from "react";
|
|
|
+import { useNavigate } from "react-router-dom";
|
|
|
+import axios from "axios";
|
|
|
+import { message } from "antd";
|
|
|
+import "./login.scss";
|
|
|
+import { STORAGE_UID } from "@/constants";
|
|
|
+import storage from "@/utils/storage";
|
|
|
+
|
|
|
+// 加密函数（简单示例，实际项目应使用更安全的加密方式）
|
|
|
+const encryptData = (data: string) => {
|
|
|
+ return btoa(encodeURIComponent(data));
|
|
|
+};
|
|
|
+
|
|
|
+const decryptData = (data: string) => {
|
|
|
+ return decodeURIComponent(atob(data));
|
|
|
+};
|
|
|
+
|
|
|
+export default function LoginPage() {
|
|
|
+ const [account, setAccount] = useState("");
|
|
|
+ const [password, setPassword] = useState("");
|
|
|
+ const [remember, setRemember] = useState(false);
|
|
|
+ const [loading, setLoading] = useState(false);
|
|
|
+ const navigate = useNavigate();
|
|
|
+
|
|
|
+ // 初始化时检查记住的账号密码
|
|
|
+ useEffect(() => {
|
|
|
+ const rememberFlag = localStorage.getItem("remember_me") === "true";
|
|
|
+ if (rememberFlag) {
|
|
|
+ try {
|
|
|
+ const encryptedAccount = localStorage.getItem("remembered_account");
|
|
|
+ const encryptedPassword = localStorage.getItem("remembered_password");
|
|
|
+ const encryptedData = localStorage.getItem("user_data");
|
|
|
+
|
|
|
+ if (encryptedAccount && encryptedPassword) {
|
|
|
+ setAccount(decryptData(encryptedAccount));
|
|
|
+ setPassword(decryptData(encryptedPassword));
|
|
|
+ setRemember(true);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (encryptedData) {
|
|
|
+ // 如果需要可以直接还原完整用户数据
|
|
|
+ const userData = JSON.parse(decryptData(encryptedData));
|
|
|
+ console.log("已存储的用户数据:", userData);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("解密存储数据失败:", error);
|
|
|
+ clearRememberedData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const clearRememberedData = () => {
|
|
|
+ localStorage.removeItem("remembered_account");
|
|
|
+ localStorage.removeItem("remembered_password");
|
|
|
+ localStorage.removeItem("user_data");
|
|
|
+ localStorage.removeItem("remember_me");
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleSubmit = async (e: React.FormEvent) => {
|
|
|
+ e.preventDefault();
|
|
|
+
|
|
|
+ if (!account || !password) {
|
|
|
+ message.warning("请输入账号和密码");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ setLoading(true);
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await axios.post("/userLogin/api/login", {
|
|
|
+ name: account,
|
|
|
+ password: password,
|
|
|
+ });
|
|
|
+
|
|
|
+ const responseData = response.data;
|
|
|
+
|
|
|
+ if (responseData.code === 200) {
|
|
|
+ storage.setItem(STORAGE_UID, JSON.stringify(responseData.data.id));
|
|
|
+
|
|
|
+ // 2. 处理记住密码功能
|
|
|
+ if (remember) {
|
|
|
+ localStorage.setItem("remembered_account", encryptData(account));
|
|
|
+ localStorage.setItem("remembered_password", encryptData(password));
|
|
|
+ localStorage.setItem("remember_me", "true");
|
|
|
+ } else {
|
|
|
+ clearRememberedData();
|
|
|
+ }
|
|
|
+
|
|
|
+ message.success("登录成功");
|
|
|
+ navigate("/");
|
|
|
+ } else {
|
|
|
+ throw new Error(responseData.message || "登录失败");
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("登录错误:", error);
|
|
|
+ message.error(error.response?.data?.message || "登录失败");
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="login-container">
|
|
|
+ <div className="login-content">
|
|
|
+ <h2 className="login-title">欢迎登录</h2>
|
|
|
+
|
|
|
+ <form className="login-form">
|
|
|
+ <div className="form-group">
|
|
|
+ <div>
|
|
|
+ <label className="form-label">账号</label>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ className="form-input"
|
|
|
+ value={account}
|
|
|
+ onChange={(e) => setAccount(e.target.value)}
|
|
|
+ autoComplete="username"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <label className="form-label">密码</label>
|
|
|
+ <input
|
|
|
+ type="password"
|
|
|
+ className="form-input"
|
|
|
+ value={password}
|
|
|
+ onChange={(e) => setPassword(e.target.value)}
|
|
|
+ autoComplete={remember ? "current-password" : "off"}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="remember-me">
|
|
|
+ <input
|
|
|
+ id="remember"
|
|
|
+ type="checkbox"
|
|
|
+ checked={remember}
|
|
|
+ onChange={(e) => setRemember(e.target.checked)}
|
|
|
+ />
|
|
|
+ <label htmlFor="remember">记住密码</label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ className="submit-button"
|
|
|
+ onClick={(e) => handleSubmit(e)}
|
|
|
+ disabled={loading}
|
|
|
+ >
|
|
|
+ {loading ? "登录中..." : "登录"}
|
|
|
+ </button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
banxia