diff --git a/react-ui/package.json b/react-ui/package.json index e7651dec..d5c09dbd 100644 --- a/react-ui/package.json +++ b/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", diff --git a/react-ui/src/pages/User/Login/index.tsx b/react-ui/src/pages/User/Login/index.tsx index 6ad360d4..dd6bc443 100644 --- a/react-ui/src/pages/User/Login/index.tsx +++ b/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 (
@@ -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(); diff --git a/react-ui/src/utils/functional.ts b/react-ui/src/utils/functional.ts new file mode 100644 index 00000000..01514db7 --- /dev/null +++ b/react-ui/src/utils/functional.ts @@ -0,0 +1,16 @@ +/* + * @Author: 赵伟 + * @Date: 2024-10-12 14:27:29 + * @Description: 函数式编程 + */ + +export function safeInvoke( + 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); + }; +} diff --git a/react-ui/src/utils/index.ts b/react-ui/src/utils/index.ts index 4938e2ca..01b6cb36 100644 --- a/react-ui/src/utils/index.ts +++ b/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; }; diff --git a/react-ui/src/utils/localStorage.ts b/react-ui/src/utils/localStorage.ts index 4b3d3125..857df82e 100644 --- a/react-ui/src/utils/localStorage.ts +++ b/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';