feat: 加密用户密码

react-ui/package.json

@@ -58,9 +58,11 @@
     "@ant-design/use-emotion-css": "1.0.4",
     "@antv/g6": "^4.8.24",
     "@antv/hierarchy": "^0.6.12",
+    "@types/crypto-js": "^4.2.2",
     "@umijs/route-utils": "^4.0.1",
     "antd": "^5.4.4",
     "classnames": "^2.3.2",
+    "crypto-js": "^4.2.0",
     "echarts": "^5.5.0",
     "fabric": "^5.3.0",
     "highlight.js": "^11.7.0",

react-ui/src/pages/User/Login/index.tsx

@@ -1,13 +1,18 @@
 import { clearSessionToken, setSessionToken } from '@/access';
 import { getCaptchaImg, login } from '@/services/system/auth';
-import { loginPasswordKey, loginUserKey, rememberPasswordKey } from '@/utils/localStorage';
+import { safeInvoke } from '@/utils/functional';
+import { loginUserKey, rememberPasswordKey } from '@/utils/localStorage';
 import { to } from '@/utils/promise';
 import { history, useModel } from '@umijs/max';
 import { Button, Checkbox, Flex, Form, Image, Input, message, type InputRef } from 'antd';
+import CryptoJS from 'crypto-js';
 import { useEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import styles from './login.less';
 
+const VERSION = 1;
+const AESKEY = 'OPENSOURCETECHNOLOGYCENTER';
+
 const LoginInputPrefix = ({ icon }: { icon: string }) => {
   return (
     <div className={styles['login-input-prefix']}>
@@ -28,14 +33,22 @@ const Login = () => {
     getCaptchaCode();
     const autoLogin = localStorage.getItem(rememberPasswordKey) ?? 'false';
     if (autoLogin === 'true') {
-      const username = localStorage.getItem(loginUserKey);
-      const password = localStorage.getItem(loginPasswordKey);
-      form.setFieldsValue({ username: username, password: password, autoLogin: true });
+      const userStorage = localStorage.getItem(loginUserKey);
+      const userJson = safeInvoke((text: string) =>
+        CryptoJS.AES.decrypt(text, AESKEY).toString(CryptoJS.enc.Utf8),
+      )(userStorage);
+      const user = safeInvoke(JSON.parse)(userJson);
+      if (user && typeof user === 'object' && user.version === VERSION) {
+        const { username, password } = user;
+        form.setFieldsValue({ username: username, password: password, autoLogin: true });
+      } else {
+        form.setFieldsValue({ username: '', password: '', autoLogin: true });
+        localStorage.removeItem(loginUserKey);
+      }
     } else {
       form.setFieldsValue({ username: '', password: '', autoLogin: false });
     }
   }, []);
-
   const getCaptchaCode = async () => {
     const [res] = await to(getCaptchaImg());
     if (res) {
@@ -69,11 +82,15 @@ const Login = () => {
 
       localStorage.setItem(rememberPasswordKey, values.autoLogin ? 'true' : 'false');
       if (values.autoLogin) {
-        localStorage.setItem(loginUserKey, values.username ?? '');
-        localStorage.setItem(loginPasswordKey, values.password ?? '');
+        const user = {
+          username: values.username,
+          password: values.password,
+          version: VERSION,
+        };
+        const encrypted = CryptoJS.AES.encrypt(JSON.stringify(user), AESKEY).toString();
+        localStorage.setItem(loginUserKey, encrypted);
       } else {
         localStorage.removeItem(loginUserKey);
-        localStorage.removeItem(loginPasswordKey);
       }
 
       await fetchUserInfo();

react-ui/src/utils/functional.ts

@@ -0,0 +1,16 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-10-12 14:27:29
+ * @Description: 函数式编程
+ */
+
+export function safeInvoke<T, M>(
+  fn: (value: T) => M | undefined | null,
+): (value: T | undefined | null) => M | undefined | null {
+  return (arg: T | undefined | null) => {
+    if (arg === undefined || arg === null) {
+      return arg as undefined | null;
+    }
+    return fn(arg);
+  };
+}

react-ui/src/utils/index.ts

@@ -216,8 +216,5 @@ export const getGitUrl = (url: string, branch: string): string => {
     return '';
   }
   const gitUrl = url.replace(/\.git$/, '');
-  if (branch) {
-    return `${gitUrl}/tree/${branch}`;
-  }
-  return gitUrl;
+  return branch ? `${gitUrl}/tree/${branch}` : gitUrl;
 };

react-ui/src/utils/localStorage.ts

@@ -1,7 +1,5 @@
-// 登录的用户名
+// 登录的用户，包括用户名、密码和版本号
 export const loginUserKey = 'login-user';
-// 登录的密码
-export const loginPasswordKey = 'login-password';
 // 记住密码
 export const rememberPasswordKey = 'login-remember-password';