Revert "fix: 修复登录页逻辑"

This reverts commit 432d1cb.
weiqinke · Jan 21, 2024 · b5032fd · b5032fd
1 parent 432d1cb
commit b5032fd
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 182 deletions.
diff --git a/public/index.html b/public/index.html
@@ -9,6 +9,6 @@
   <body>
     <div id="caravan-root"></div>
     <%- injectScript %>
-    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=pfDeQwmAwislusrWwBxzVVXLfXustbd7"></script>
+    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=pfDeQwmAwislusrWwBxzVVXLfXustbd7"></script>
   </body>
 </html>
diff --git a/src/api/caravan/Login.ts b/src/api/caravan/Login.ts
@@ -24,11 +24,6 @@ export const accountlogin = payload => {
   return request(`${BASE_URL}user/accountlogin`, "POST", payload);
 };
 
-/** 获取通知列表接口 */
-export const userTokenByOAuth2Code = payload => {
-  return request(`${BASE_URL}user/userTokenByOAuth2Code`, "GET", payload);
-};
-
 /** 获取菜单接口 */
 export const getUserMenus = payload => {
   return request(`${BASE_URL}menus/getUserMenus`, "get", payload);

diff --git a/src/components/Echarts/LineChart.tsx b/src/components/Echarts/LineChart.tsx
@@ -17,6 +17,7 @@ const LineChart: FC = () => {
     buildPath: function (ctx, shape) {
       // 会canvas的应该都能看得懂，shape是从custom传入的
       const xAxisPoint = shape.xAxisPoint;
+      // console.log(shape);
       const c0 = [shape.x, shape.y];
       const c1 = [shape.x - offsetX, shape.y - offsetY];
       const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];

diff --git a/src/components/Forms/LoginForm/index.module.scss b/src/components/Forms/LoginForm/index.module.scss
@@ -1,6 +1,6 @@
 .container {
   width: 324px;
-  min-height: 366px;
+  height: 366px;
   padding: 12px;
   position: absolute;
   top: 50%;
@@ -20,7 +20,7 @@
 
 .title {
   text-align: center;
-  padding: 0px 12px;
+  padding: 12px;
 }
 
 .forgetPassword {
@@ -50,22 +50,3 @@
 .captchaInput {
   width: 50%;
 }
-
-.ohter {
-  display: flex;
-  justify-content: center;
-  gap: 15px;
-  // justify-content: center;
-
-  &:first-child {
-    margin-left: auto;
-  }
-
-  &:last-child {
-    margin-right: auto;
-  }
-}
-
-.type {
-  display: block;
-}
diff --git a/src/components/Forms/LoginForm/index.tsx b/src/components/Forms/LoginForm/index.tsx
@@ -1,54 +1,23 @@
-import { accountlogin, getUserMenus, userTokenByOAuth2Code } from "@/api/caravan/Login";
+import { accountlogin, getUserMenus } from "@/api/caravan/Login";
 import ProjectContext from "@/contexts/ProjectContext";
-import { getUrlParam, getUserState } from "@/utils/core";
+import { getUserState } from "@/utils/core";
 import { saveMenus } from "@/utils/menuUtils";
 import { getIndexUrlInfo, ProjectParseMenuAsPre, SaveMeUrl } from "@/utils/menuUtils";
 import { LockOutlined, UserOutlined } from "@ant-design/icons";
-import { Button, Checkbox, Divider, Form, Input, Spin, message } from "antd";
+import { Button, Checkbox, Form, Input, message } from "antd";
 import CaptchaMini from "captcha-mini";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { webSocketManager } from "@/utils/ws";
 import styles from "./index.module.scss";
 import MenuTagContext from "@/contexts/MenuTagContext";
-import IconFont from "@/components/IconFont";
 
 const LoginForm = () => {
   const navigate = useNavigate();
   const { setValue } = useContext(ProjectContext);
   const { setTags } = useContext(MenuTagContext);
   const inputRef = useRef();
 
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    const code = getUrlParam("code");
-    const state = getUrlParam("state");
-    if (code) {
-      setLoading(true);
-      userTokenByOAuth2Code({
-        code,
-        state
-      })
-        .then(res => {
-          // debugger;
-          if (res.data.code === 200) {
-            const { avatar, nick, token } = res.data.data;
-            localStorage.setItem("nick", nick);
-            localStorage.setItem("loginState", "1");
-            localStorage.setItem("token", token);
-            localStorage.setItem("nick", nick);
-            localStorage.setItem("avatar", avatar || "");
-            setValue(getUserState());
-            getMenuData();
-          }
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-    }
-  }, []);
-
   useEffect(() => {
     if (!inputRef.current) return;
     const captcha2 = new CaptchaMini({
@@ -68,52 +37,47 @@ const LoginForm = () => {
   }, []);
 
   const onFinish = values => {
-    setLoading(true);
-    accountlogin({ ...values, logintype: "web" })
-      .then(r => {
-        if (r.data.code === 200) {
-          const { avatar, nick, token } = r.data.data;
-          localStorage.setItem("nick", nick);
-          localStorage.setItem("loginState", "1");
-          localStorage.setItem("token", token);
-          localStorage.setItem("nick", nick);
-          localStorage.setItem("avatar", avatar);
-          setValue(getUserState());
-          getMenuData();
-        } else {
-          setLoading(false);
-        }
-      })
-      .catch(() => setLoading(false));
+    accountlogin({ ...values, logintype: "web" }).then(r => {
+      if (r.data.code === 200) {
+        const { avatar, nick, token } = r.data.data;
+        localStorage.setItem("nick", nick);
+        localStorage.setItem("loginState", "1");
+        localStorage.setItem("token", token);
+        localStorage.setItem("nick", nick);
+        localStorage.setItem("avatar", avatar);
+        setValue(getUserState());
+        getMenuData();
+      }
+    });
   };
 
   const getMenuData = () => {
-    getUserMenus({ version: 2 })
-      .then(r => {
-        if (r.data.code === 200) {
-          const cacheMenu = r.data.data;
-          if (!cacheMenu) return message.info("暂未分配权限，请通知管理员分配权限");
-          saveMenus(JSON.stringify(cacheMenu));
-          webSocketManager.postMessage({
-            type: "ResetUserName",
-            data: {
-              token: localStorage.getItem("token")
-            }
-          });
-          const allMenusInfo = SaveMeUrl(ProjectParseMenuAsPre(cacheMenu.concat()), "");
-          //找到第一个url直接跳转过去吧
-          const indexTag = getIndexUrlInfo(allMenusInfo);
-          const { meUrl } = indexTag;
-          const from = { pathname: meUrl };
-          setTags([]);
-          navigate(from);
-          // 登录以后，还要把socket名字改掉
-        }
-      })
-      .finally(() => setLoading(false));
+    getUserMenus({ version: 2 }).then(r => {
+      if (r.data.code === 200) {
+        const cacheMenu = r.data.data;
+        if (!cacheMenu) return message.info("暂未分配权限，请通知管理员分配权限");
+        saveMenus(JSON.stringify(cacheMenu));
+        webSocketManager.postMessage({
+          type: "ResetUserName",
+          data: {
+            token: localStorage.getItem("token")
+          }
+        });
+        const allMenusInfo = SaveMeUrl(ProjectParseMenuAsPre(cacheMenu.concat()), "");
+        //找到第一个url直接跳转过去吧
+        const indexTag = getIndexUrlInfo(allMenusInfo);
+        const { meUrl } = indexTag;
+        const from = { pathname: meUrl };
+        setTags([]);
+        navigate(from);
+        // 登录以后，还要把socket名字改掉
+      }
+    });
   };
 
-  const onFinishFailed = () => {};
+  const onFinishFailed = errorInfo => {
+    console.log("Failed:", errorInfo);
+  };
 
   const initialValues = { remember: true, name: "qkstart", password: "123456" };
 
@@ -129,70 +93,38 @@ const LoginForm = () => {
   return (
     <div className={styles.container}>
       <h1 className={styles.title}>欢迎登录</h1>
-      <Spin spinning={loading} delay={500}>
-        <Form name="basic" initialValues={initialValues} onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off">
-          <Form.Item name="name" rules={[{ required: true, message: "请输入用户名!" }]}>
-            <Input placeholder="qkstart" prefix={<UserOutlined />} />
-          </Form.Item>
+      <Form name="basic" initialValues={initialValues} onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete="off">
+        <Form.Item name="name" rules={[{ required: true, message: "请输入用户名!" }]}>
+          <Input placeholder="qkstart" prefix={<UserOutlined />} />
+        </Form.Item>
 
-          <Form.Item name="password" rules={[{ required: true, message: "请输入密码!" }]}>
-            <Input type="password" placeholder="123456" prefix={<LockOutlined />} />
-          </Form.Item>
+        <Form.Item name="password" rules={[{ required: true, message: "请输入密码!" }]}>
+          <Input type="password" placeholder="123456" prefix={<LockOutlined />} />
+        </Form.Item>
 
-          <Form.Item className={styles.captchaLogin}>
-            <Form.Item name="captcha" rules={[{ required: true, message: "请输入验证码!" }]} noStyle>
-              <Input placeholder="请输入验证码" className={styles.captchaInput} />
-            </Form.Item>
-            <canvas width="140" height="32" id="captchaLogin" ref={inputRef} className={styles.captchaContainer} title="看不清？点击换一张。"></canvas>
+        <Form.Item className={styles.captchaLogin}>
+          <Form.Item name="captcha" rules={[{ required: true, message: "请输入验证码!" }]} noStyle>
+            <Input placeholder="请输入验证码" className={styles.captchaInput} />
           </Form.Item>
+          <canvas width="140" height="32" id="captchaLogin" ref={inputRef} className={styles.captchaContainer} title="看不清？点击换一张。"></canvas>
+        </Form.Item>
 
-          <div className={styles.other}>
-            <Form.Item name="remember" valuePropName="checked" noStyle>
-              <Checkbox>记住登录状态</Checkbox>
-            </Form.Item>
-            <Form.Item noStyle>
-              <span className={styles.forgetPassword}>忘记密码</span>
-            </Form.Item>
-          </div>
-          <div className={styles.submit}>
-            <Form.Item noStyle>
-              <Button block type="primary" htmlType="submit">
-                登录
-              </Button>
-            </Form.Item>
-          </div>
-        </Form>
-
-        <Divider plain style={{ borderWidth: 13 }}>
-          或者使用第三方登录
-        </Divider>
-        <div className={styles.ohter}>
-          <div className={styles.type}>
-            <Button
-              type="link"
-              href="https://gitee.com/oauth/authorize?client_id=7cb714b21edaa2130a98b69a108b833f61d3b04cfde1fd64cb387abcd6a378c2&state=gitee&redirect_uri=https%3A%2F%2Fnest-admin.com%2Flogin&response_type=code">
-              <IconFont type="icon-GitHub" />
-              Github
-            </Button>
-          </div>
-          <div className={styles.type}>
-            <Button
-              type="link"
-              href="https://gitee.com/oauth/authorize?client_id=7cb714b21edaa2130a98b69a108b833f61d3b04cfde1fd64cb387abcd6a378c2&state=gitee&redirect_uri=https%3A%2F%2Fnest-admin.com%2Flogin&response_type=code">
-              <IconFont type="icon-gitee2" />
-              Gitee
-            </Button>
-          </div>
-          <div className={styles.type}>
-            <Button
-              type="link"
-              href="https://gitee.com/oauth/authorize?client_id=7cb714b21edaa2130a98b69a108b833f61d3b04cfde1fd64cb387abcd6a378c2&state=gitee&redirect_uri=https%3A%2F%2Fnest-admin.com%2Flogin&response_type=code">
-              <IconFont type="icon-qq" />
-              QQ
+        <div className={styles.other}>
+          <Form.Item name="remember" valuePropName="checked" noStyle wrapperCol={12}>
+            <Checkbox>记住登录状态</Checkbox>
+          </Form.Item>
+          <Form.Item noStyle wrapperCol={12}>
+            <span className={styles.forgetPassword}>忘记密码</span>
+          </Form.Item>
+        </div>
+        <div className={styles.submit}>
+          <Form.Item noStyle>
+            <Button block type="primary" htmlType="submit">
+              登录
             </Button>
-          </div>
+          </Form.Item>
         </div>
-      </Spin>
+      </Form>
     </div>
   );
 };

diff --git a/src/components/IconFont/index.tsx b/src/components/IconFont/index.tsx
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from "@ant-design/icons";
 
 const IconFont = createFromIconfontCN({
   scriptUrl: [
-    "//at.alicdn.com/t/c/font_4414978_lkcrv612hu9.js" // icon-javascript, icon-java, icon-shoppingcart (overridden)
+    "//at.alicdn.com/t/c/font_4414978_7cl1sqnp14m.js" // icon-javascript, icon-java, icon-shoppingcart (overridden)
   ]
 });
 

diff --git a/src/components/SystemInfo/index.tsx b/src/components/SystemInfo/index.tsx
@@ -75,6 +75,7 @@ const SystemInfo: React.FC = () => {
       { id: "3", content: "内存 正常" },
       { id: "4", content: "欢迎登陆" }
     ];
+    console.log("我发送一次");
     webSocketManager.postMessage({ type: "memStatus" });
 
     setMessageList(message);

diff --git a/src/utils/core.ts b/src/utils/core.ts
@@ -2,16 +2,10 @@ import qs from "qs";
 
 const SYSTEM_TOKEN = "token";
 
-function atou(str) {
-  return decodeURIComponent(escape(atob(str)));
-}
 export const getUserState = () => {
   const token = window.localStorage.getItem(SYSTEM_TOKEN);
   if (!token) return {};
-  const result = token.replace("_", "/").replace("-", "+"); // 添加这一行
-  const payload = result.split(".")[1];
-  const userPayload = atou(payload);
-  return JSON.parse(userPayload);
+  return JSON.parse(decodeURIComponent(encodeURIComponent(window.atob(token.split(".")[1]))));
 };
 
 /**
@@ -141,7 +135,9 @@ export const tupleNum = <T extends number[]>(...args: T) => args;
  * @example
 ```
 async function test() {
+  console.log('Hello')
   await sleep(1000)
+  console.log('world!')
 }
 ```
  */
@@ -218,16 +214,3 @@ export const bd_encrypt = (gg_lng: string = "0", gg_lat: string = "0") => {
 };
 
 export const isTagVisible = (v: string) => v === "0";
-
-export const getUrlParam = name => {
-  //构造一个含有目标参数的正则表达式对象
-  const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
-  //匹配目标参数
-  const r = window.location.search.substr(1).match(reg);
-  //返回参数
-  if (r != null) {
-    return decodeURIComponent(r[2]);
-  } else {
-    return null;
-  }
-};
diff --git a/src/utils/socketDispatch.ts b/src/utils/socketDispatch.ts
@@ -39,6 +39,7 @@ const getOnlineUsers = async (payload: any) => {
   const { OnlineUser } = data;
   switch (func_call) {
     case "getOnlineUsers":
+      // console.log(OnlineUser, '在线列表');
       return OnlineUser;
   }
 };