提交

package.json

@@ -11,12 +11,14 @@
     "@types/node": "^16.18.95",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",
+    "@types/sha256": "^0.2.2",
     "antd": "^5.16.1",
     "axios": "^1.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "sha256": "^0.2.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/api/api.d.ts

@@ -2,3 +2,7 @@ interface api_login_params {
   loginName: string;
   loginPassword: string;
 }
+
+interface api_login_res {
+  token: string;
+}

src/api/index.tsx

@@ -6,47 +6,53 @@ const _axios = axios.create({
   baseURL: api.url,
   timeout: api.timeout,
   headers: {
-      ...api.default_header
+    ...api.default_header
   }
 });
 
 // 拦截请求
 // 请求拦截器，用于显示加载提示
 _axios.interceptors.request.use(
-    config => {
-      // 显示加载提示（例如：加载中...）
-      message.loading('数据加载中...', 0); // duration设为0表示不会自动关闭
-      return config;
-    },
-    error => {
-      // 对请求错误进行处理，如显示错误提示
-      message.error('请求发送失败，请稍后再试');
-      return Promise.reject(error);
+  config => {
+    // 显示加载提示（例如：加载中...）
+    message.loading('数据加载中...', 0); // duration设为0表示不会自动关闭
+    return config;
+  },
+  error => {
+    // 对请求错误进行处理，如显示错误提示
+    message.error('请求发送失败，请稍后再试');
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器，用于处理请求结果并关闭加载提示
+_axios.interceptors.response.use(
+  response => {
+    // 请求成功，关闭加载提示
+    message.destroy(); // 关闭之前创建的loading提示
+
+    // 解构返回值
+    const { data } = response;
+    if (response.data.code !== 0) {
+      if (data.code !== 0) message.error(`请求失败：${data.code} ${data.message}`);
+      return {}
     }
-  );
-  
-  // 响应拦截器，用于处理请求结果并关闭加载提示
-  _axios.interceptors.response.use(
-    response => {
-      // 请求成功，关闭加载提示
-      message.destroy(); // 关闭之前创建的loading提示
-      return response;
-    },
-    error => {
-      // 请求失败，关闭加载提示并显示错误信息
-      message.destroy();
-      if (error.response) {
-        message.error(`请求失败：${error.response.status} ${error.response.statusText}`);
-      } else {
-        message.error('网络异常，请检查网络连接');
-      }
-      if(error.response.data) {
-        const { message, code } = error.response.data;
-        if(code !== 0) message.error(`请求失败：${code} ${message}`);
-      }
-      return Promise.reject(error);
+    return data.data || {};
+  },
+  error => {
+    // 请求失败，关闭加载提示并显示错误信息
+    message.destroy();
+    if (error.response) {
+      message.error(`请求失败：${error.response.status} ${error.response.statusText}`);
+    } else {
+      message.error('网络异常，请检查网络连接');
     }
-  );
-  
+    if (error.response.data) {
+      const data = error.response.data;
+      if (data.code !== 0) message.error(`请求失败：${data.code} ${data.message}`);
+    }
+    return Promise.reject(error);
+  }
+);
 
 export default _axios;

src/errorPage/404/index.css

@@ -0,0 +1,5 @@
+.error404 {
+  width: 100%;
+  height: 100%;
+  padding-top: 15%;
+}

src/errorPage/404/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Empty } from 'antd';
+import './index.css';
+
+const Login: React.FC = () => {
+  return (
+    <div className='error404'>
+      <Empty
+        description={
+          <span>
+            <span>页面走丢了</span>
+          </span>
+        }
+      >
+      </Empty>
+    </div>
+  );
+};
+
+export default Login;

src/router/index.tsx

@@ -4,7 +4,9 @@ import Home from '../view/home/index';
 
 // 引入骨架页
 import Skeleton from '../view/skeleton/index';
-import { Children } from 'react';
+
+// 引入错误页
+import Error404 from '../errorPage/404/index';
 
 const router = [
   {
@@ -17,6 +19,10 @@ const router = [
     children: [
         { path: '', element: <Home /> }
     ]
+  },
+  {
+    path: '*',
+    element: <Error404 />
   }
 ];
 

src/view/login/index.css

@@ -1,7 +1,7 @@
 .login {
   width: 100%;
   height: 100%;
-  padding-top: 25%;
+  padding-top: 15%;
 }
 
 .login_main {

src/view/login/index.tsx

@@ -1,18 +1,26 @@
 import React from 'react';
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Form, Input } from 'antd';
+import { Button, Form, Input } from 'antd';
+import { useNavigate } from 'react-router-dom';
+import sha265 from 'sha256';
 
-import { api_login } from "../../api/system";
+import { api_login } from '../../api/system';
 
 import './index.css';
 
-
 const Login: React.FC = () => {
-  const onFinish = (values: any) => {
-    api_login(values).then(r=>{
-        console.log(r)
-    })
+  const navigate = useNavigate();
+
+  const onFinish = async (values: api_login_params) => {
+    const res = (await api_login({
+      ...values,
+      loginPassword: sha265(values.loginPassword)
+    })) as any;
+    if (!res.token) return;
+    localStorage.setItem('token', res.token);
+    navigate('/home');
   };
+
   return (
     <div className='login'>
       <div className='login_main'>
@@ -22,19 +30,10 @@ const Login: React.FC = () => {
           initialValues={{ remember: true }}
           onFinish={onFinish}
         >
-          <Form.Item
-            name='loginName'
-            rules={[{ required: true, message: '请输入用户名!' }]}
-          >
-            <Input
-              prefix={<UserOutlined className='site-form-item-icon' />}
-              placeholder='用户名'
-            />
+          <Form.Item name='loginName' rules={[{ required: true, message: '请输入用户名!' }]}>
+            <Input prefix={<UserOutlined className='site-form-item-icon' />} placeholder='用户名' />
           </Form.Item>
-          <Form.Item
-            name='loginPassword'
-            rules={[{ required: true, message: '请输入密码!' }]}
-          >
+          <Form.Item name='loginPassword' rules={[{ required: true, message: '请输入密码!' }]}>
             <Input
               prefix={<LockOutlined className='site-form-item-icon' />}
               type='password'
@@ -43,7 +42,7 @@ const Login: React.FC = () => {
           </Form.Item>
 
           <Form.Item>
-            <Button type='primary' htmlType='submit' className='login-form-button' >
+            <Button type='primary' htmlType='submit' className='login-form-button'>
               登录
             </Button>
           </Form.Item>