feat: 记住用户密码 ( #27 )

package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.3.0",
     "antd": "^5.14.1",
+    "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
     "dom-copilot": "1.0.0-Beta",
     "path-copilot": "1.0.0-Beta",
@@ -44,6 +45,7 @@
     "use-compare": "^1.0.0"
   },
   "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
     "@types/express": "^4.17.21",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",

src/pages/Login/components/LoginBg/index.tsx

@@ -10,7 +10,7 @@ const LoginBg: React.FC<LoginBgProps> = ({ children }) => {
       <div className={styles.loginBg} />
       <div className={styles.loginTitle}>
         <img className={styles.logoImg} src="/logo-dark.svg" />
-        <strong>R-ADMIN</strong>
+        <strong>G-ADMIN</strong>
       </div>
       <div className={styles.loginText}>
         <h3>用真诚</h3>

src/pages/Login/index.tsx

@@ -1,4 +1,5 @@
 import { login } from '@/services/login';
+import { decrypt, encrypt } from '@/utils';
 import {
   AlipayCircleFilled,
   GithubFilled,
@@ -7,7 +8,7 @@ import {
   WechatFilled,
 } from '@ant-design/icons';
 import { Button, Checkbox, Form, Input, Space, message } from 'antd';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { flushSync } from 'react-dom';
 import storetify from 'storetify';
 import { FormattedMessage, useModel, useNavigate } from 'umi';
@@ -27,6 +28,8 @@ const LoginPage: React.FC = () => {
   const { initialState, setInitialState } = useModel('@@initialState');
   const [isLogging, setLogging] = useState(false);
 
+  const [form] = Form.useForm();
+
   const navigate = useNavigate();
 
   const fetchUserInfo = async () => {
@@ -44,6 +47,20 @@ const LoginPage: React.FC = () => {
 
   const handleSubmit = async (values: any) => {
     setLogging(true);
+    if (values.rememberMe) {
+      const { username, password, rememberMe } = values;
+      storetify(
+        'rememberMe',
+        {
+          username,
+          password: encrypt(password),
+          rememberMe,
+        },
+        60 * 60 * 24 * 30,
+      );
+    } else {
+      storetify('rememberMe', undefined);
+    }
     try {
       const res = await login({ ...values });
       storetify(TOKEN_KEY, res.data.accessToken);
@@ -55,6 +72,21 @@ const LoginPage: React.FC = () => {
       setLogging(false);
     }
   };
+  const getRemember = () => {
+    const { username, password, rememberMe } =
+      (storetify('rememberMe') as any) || {};
+    const values = form.getFieldsValue(['username', 'password', 'rememberMe']);
+    const loginForm = {
+      username: username === undefined ? values.username : username,
+      password: password === undefined ? values.password : decrypt(password),
+      rememberMe:
+        rememberMe === undefined ? values.rememberMe : Boolean(rememberMe),
+    };
+    form.setFieldsValue(loginForm);
+  };
+  useEffect(() => {
+    getRemember();
+  }, []);
 
   return (
     <div className={styles.page}>
@@ -63,9 +95,10 @@ const LoginPage: React.FC = () => {
           <div className={styles.title}>欢迎开启新世界</div>
           <Form
             {...formItemLayout}
+            form={form}
             name="login"
             size="large"
-            initialValues={{ remember: true }}
+            initialValues={{ rememberMe: true }}
             onFinish={async (values) => {
               await handleSubmit(values);
             }}
@@ -96,7 +129,7 @@ const LoginPage: React.FC = () => {
               />
             </Form.Item>
             <Form.Item style={{ marginBottom: '5px' }}>
-              <Form.Item name="remember" valuePropName="checked" noStyle>
+              <Form.Item name="rememberMe" valuePropName="checked" noStyle>
                 <Checkbox>
                   <FormattedMessage id={'pages.login.rememberMe'} />
                 </Checkbox>

src/utils/index.ts

@@ -1 +1,2 @@
 export { default as logger } from './logger';
+export { decrypt, encrypt } from './secret';

src/utils/secret.ts

@@ -0,0 +1,30 @@
+import CryptoJS from 'crypto-js';
+const aseKey = '0123456789abcdef';
+const iv = 'abcdef0123456789';
+let key = CryptoJS.enc.Utf8.parse(aseKey);
+let ivs = CryptoJS.enc.Utf8.parse(iv);
+
+//加密
+export function encrypt(data: any) {
+  let encrypted = CryptoJS.AES.encrypt(data, key, {
+    iv: ivs,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  return encrypted.toString();
+}
+
+//解密
+export function decrypt(data: any) {
+  let decrypt = CryptoJS.AES.decrypt(data, key, {
+    iv: ivs,
+    mode: CryptoJS.mode.CBC,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
+}
+
+export default {
+  encrypt,
+  decrypt,
+};