import styles from "./index.module.scss"; import { Input, Button } from "antd"; import { UserOutlined, LockOutlined, NumberOutlined } from "@ant-design/icons"; import { useCallback, useEffect, useState } from "react"; import { Base64 } from "js-base64"; import encodeStr from "@/utils/pass"; import { setTokenInfo } from "@/utils/storage"; import history from "@/utils/history"; import { MessageFu } from "@/utils/message"; import { API_LoginGetCode, userLoginAPI } from "@/store/action/layout"; import LogoImg from "@/assets/img/logo.png"; export default function Login() { // 获取验证码 const LoginGetCodeFu = useCallback(async () => { const res: any = await API_LoginGetCode(); const reader = new FileReader(); reader.readAsDataURL(res); reader.onload = () => { setCodeImg(reader.result); }; }, []); useEffect(() => { LoginGetCodeFu(); }, [LoginGetCodeFu]); // 账号密码 - 验证码 const [userName, setUserName] = useState(""); const [passWord, setPassWord] = useState(""); const [code, setCode] = useState(""); const [codeImg, setCodeImg] = useState(""); useEffect(() => { //进入登录页 重置 权限信息为空 }, []); // 键盘按下回车事件 const keyUpEntFu = (e: React.KeyboardEvent) => { if (e.key === "Enter") loginClickFu(); }; // 点击登录 const loginClickFu = useCallback(async () => { // 非空判断 if (userName === "") return MessageFu.warning("请输入账号!"); else if (passWord === "") return MessageFu.warning("请输入密码!"); const obj = { userName, passWord: encodeStr(Base64.encode(passWord)), randCode: code, }; const res: any = await userLoginAPI(obj); if (res.code === 0) { MessageFu.success("登录成功"); // 检查密码是不是默认密码,是的话给提示 if (passWord === "123456") { window.setTimeout(() => { MessageFu.warning("您的密码还是默认密码,请尽快修改!"); }, 1000); } // 用户信息存到本地 setTokenInfo(res.data); history.push("/"); } else if (res.code === 3014) { MessageFu.warning("账号不存在或密码错误,请联系管理员!"); } else if (res.code === -1 && res.msg === "验证码有误") { LoginGetCodeFu(); } }, [LoginGetCodeFu, code, passWord, userName]); return (
{/* logg */}
{/* 账号密码输入框 */}
keyUpEntFu(e)} value={userName} onChange={(e) => setUserName(e.target.value.trim())} prefix={} placeholder="请输入账号" maxLength={15} />
keyUpEntFu(e)} value={passWord} onChange={(e) => setPassWord(e.target.value.trim())} prefix={} placeholder="请输入密码" maxLength={20} />
keyUpEntFu(e)} value={code} onChange={(e) => setCode(e.target.value.trim())} prefix={} placeholder="请输入验证码" maxLength={5} /> {codeImg ? ( ) : null}
{/* 登录按钮 */}
); }