后台添加登录验证码

houtai/src/pages/Login/index.tsx

@@ -2,11 +2,11 @@ import styles from "./index.module.scss";
 
 import { Input, Button } from "antd";
 import { UserOutlined, LockOutlined } from "@ant-design/icons";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Base64 } from "js-base64";
 import { setTokenInfo } from "@/utils/storage";
 import { MessageFu } from "@/utils/message";
-import { userLoginAPI } from "@/store/action/layout";
+import { getVerificationCode, userLoginAPI } from "@/store/action/layout";
 
 import store from "@/store";
 import history from "@/utils/history";
@@ -16,14 +16,32 @@ import LoginIMG from "@/assets/img/logo.png";
 import centerIMG from "@/assets/img/center.png";
 
 export default function Login() {
-  // 进登录页面把权限的信息初始化，防止登录成功之后进到首页，数据渲染问题
-  useEffect(() => {
-    store.dispatch({ type: "layout/setAuthPageArr", payload: [] });
-  }, []);
-
   // 账号密码
   const [userName, setUserName] = useState("");
   const [passWord, setPassWord] = useState("");
+  const [verificationCode, setVerificationCode] = useState("");
+  const [refreshCount, setRefreshCount] = useState(0);
+  const [codeUrl, setCodeUrl] = useState(
+    "/api/show/getRandCode"
+  );
+
+  let timeCount: number = 2000;
+
+  let TimeA: any = null;
+
+
+  // 点击刷新验证码按钮的处理函数
+  const handleRefreshCaptcha = () => {
+    // getCode();
+    // 更新刷新计数以触发useEffect中的依赖
+    setRefreshCount(refreshCount + 1);
+  };
+
+  // 进登录页面把权限的信息初始化，防止登录成功之后进到首页，数据渲染问题
+  useEffect(() => {
+    store.dispatch({ type: "layout/setAuthPageArr", payload: [] });
+    console.log("被刷新");
+  }, [TimeA, timeCount]);
 
   // 键盘按下回车事件
   const keyUpEntFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -34,9 +52,11 @@ export default function Login() {
     // 非空判断
     if (userName === "") return MessageFu.warning("请输入用户名!");
     else if (passWord === "") return MessageFu.warning("请输入密码!");
+    else if (verificationCode === "") return MessageFu.warning("请输入验证码");
     const obj = {
       userName,
       passWord: encodeStr(Base64.encode(passWord)),
+      randCode: verificationCode,
     };
     const res: any = await userLoginAPI(obj);
     if (res.code === 0) {
@@ -44,8 +64,11 @@ export default function Login() {
       // 用户信息存到本地
       setTokenInfo(res.data);
       history.push("/");
-    } else if (res.code === 3014)
+    } else if (res.code === 3014) {
       MessageFu.warning("用户名不存在或密码错误，请联系管理员!");
+    } else if (res.code === -1) {
+      handleRefreshCaptcha();
+    }
   };
 
   return (
@@ -81,11 +104,35 @@ export default function Login() {
               maxLength={20}
             />
           </div>
+          <div className="inputBoxRow">
+            <Input
+              onKeyUp={(e) => keyUpEntFu(e)}
+              value={verificationCode}
+              onChange={(e) => setVerificationCode(e.target.value.trim())}
+              placeholder="请输入验证码"
+              maxLength={6}
+              style={{ height: "40px", marginRight: "10px", width: "68%" }}
+            />
+            <img
+              style={{ cursor: "pointer" }}
+              src={codeUrl + `?${refreshCount}`}
+              alt=""
+              onClick={() => {
+                handleRefreshCaptcha();
+              }}
+            />
+          </div>
         </div>
 
         {/* 登录按钮 */}
         <div className="loginBtn">
-          <Button type="primary" size="large" onClick={loginClickFu}>
+          <Button
+            type="primary"
+            size="large"
+            onClick={() => {
+              loginClickFu();
+            }}
+          >
             登 录
           </Button>
         </div>

houtai/src/store/action/layout.ts

@@ -10,6 +10,13 @@ export const userLoginAPI = (data: any) => {
 };
 
 /**
+ * 用户登录获取验证码接口
+ */
+export const getVerificationCode = () => {
+  return http.get("show/getRandCode");
+};
+
+/**
  * 修改密码接口
  */
 export const passWordEditAPI = (data: any) => {

houtai/src/utils/http.ts

@@ -10,7 +10,9 @@ export const baseURL =
   // process.env.NODE_ENV === "development"
   //   ? "http://192.168.20.61:8063/api/"
   //   : "";
-  process.env.NODE_ENV === "development" ? "https://sit-cnzhengquan.4dage.com" : "";
+  process.env.NODE_ENV === "development"
+    ? "https://sit-cnzhengquan.4dage.com"
+    : "";
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module "axios" {
@@ -68,8 +70,11 @@ http.interceptors.response.use(
       }, 200);
     } else if (response.data.code === 0) {
       // MessageFu.success(response.data.msg);
-    } else if (response.data.code !== 3014)
+    } else if (response.data.code !== 3014) {
       MessageFu.warning(response.data.msg);
+    } else if (response.data.code === -1) {
+      MessageFu.warning("操作频繁！");
+    }
 
     return response.data;
   },