对接API

env/.env.development

@@ -2,7 +2,4 @@
 VITE_ENV = 'development'
 
 # Api地址
-VITE_API_URL = 'http://192.168.1.10:8080'
-
-# WebSocket地址
-VITE_WEBSOCKET_URL = 'ws://192.168.1.10:8080/ws'
+VITE_API_URL = 'http://xia0miduo.gicp.net:8091'

env/.env.production

@@ -2,7 +2,4 @@
 VITE_ENV = 'production'
 
 # Api地址
-VITE_API_URL = 'https://www.baidu.com'
-
-# WebSocket地址
-VITE_WEBSOCKET_URL = 'wss://www.baidu.com/wss'
+VITE_API_URL = 'http://xia0miduo.gicp.net:8091'

package-lock.json

@@ -25,7 +25,7 @@
         "@vitejs/plugin-react": "^4.3.0",
         "less": "^4.2.0",
         "typescript": "^5.7.0",
-        "vite": "^6.0.0"
+        "vite": "6.0.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2903,12 +2903,12 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-6.0.6.tgz",
-      "integrity": "sha512-NSjmUuckPmDU18bHz7QZ+bTYhRR0iA72cs2QAxCqDpafJ0S6qetco0LB3WW2OxlMHS0JmAv+yZ/R3uPmMyGTjQ==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-6.0.0.tgz",
+      "integrity": "sha512-Q2+5yQV79EdnpbNxjD3/QHVMCBaQ3Kpd4/uL51UGuh38bIIM+s4o3FqyCzRvTRwFb+cWIUeZvaWwS9y2LD2qeQ==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.24.2",
+        "esbuild": "^0.24.0",
         "postcss": "^8.4.49",
         "rollup": "^4.23.0"
       },

package.json

@@ -28,6 +28,6 @@
     "@vitejs/plugin-react": "^4.3.0",
     "less": "^4.2.0",
     "typescript": "^5.7.0",
-    "vite": "^6.0.0"
+    "vite": "6.0.0"
   }
 }

src/LocalStorage.ts

@@ -18,14 +18,14 @@ class LocalStorage {
         }
     }
 
-    // 存储token
+    // 存储凭证
     setToken = (token: string) => {
         localStorage.setItem('token', token);
     }
 
     // 存储用户信息
-    setUserInfo = (userInfo: UserInfo) => {
-        localStorage.setItem('userInfo', JSON.stringify(userInfo));
+    setUserInfo = (info: UserInfo) => {
+        localStorage.setItem('userInfo', JSON.stringify(info));
     }
 
     // 获取账号密码
@@ -35,12 +35,13 @@ class LocalStorage {
         if (accountPasswordString) {
             const accountPassword: AccountPassword = JSON.parse(accountPasswordString);
             return accountPassword;
+        } else {
+            return undefined;
         }
-        return undefined;
     }
 
-    // 获取token
-    getToken = (): string | undefined => {
+    // 获取凭证
+    getToken = () => {
         const token = localStorage.getItem('token');
 
         if (token) {
@@ -53,13 +54,14 @@ class LocalStorage {
 
     // 获取用户信息
     getUserInfo = () => {
-        const userInfoString = localStorage.getItem('userInfo');
+        const infoString = localStorage.getItem('userInfo');
 
-        if (userInfoString) {
-            const userInfo: UserInfo = JSON.parse(userInfoString);
-            return userInfo;
+        if (infoString) {
+            const info: UserInfo = JSON.parse(infoString);
+            return info;
+        } else {
+            return undefined;
         }
-        return undefined;
     }
 
     // 清除

src/apis/api.ts

@@ -24,13 +24,16 @@ axiosInstance.interceptors.request.use(
 // 响应拦截器
 axiosInstance.interceptors.response.use(
     (response: AxiosResponse) => {// 成功信息
-        const { config, data } = response;
-        if (config.responseType === 'blob') {
+        const { data } = response;
+        if (data.code === 200) {// 成功
             return Promise.resolve(data);
-        } else {
-            if (data.code === 200) {// 成功
-                return Promise.resolve(data);
-            } else {// 失败
+        } else {// 失败
+            if (data.code === 401) {
+                LocalStorage.clear();
+                router.navigate({ pathname: '/login' }, { replace: true });
+                message.error('登录过期');
+                return Promise.reject();
+            } else {
                 return Promise.reject(data);
             }
         }
@@ -41,10 +44,8 @@ axiosInstance.interceptors.response.use(
         if (String(error).includes('timeout')) {
             message.error('请求超时');
         } else {
-            if (statusCode === 401) {
-                LocalStorage.clear();
-                router.navigate({ pathname: '/login' }, { replace: true });
-                message.error('登录过期');
+            if (statusCode < 500) {
+                message.error('请求失败');
             } else {
                 message.error('服务异常');
             }

src/apis/config.ts

@@ -1,50 +1,18 @@
-import { UploadProps, UploadFile, message } from 'antd';
 import LocalStorage from '@/LocalStorage';
 
-const baseURL = '/api/client_api';
+const baseURL = '/api';
 
 const config = {
     baseURL: baseURL,
-    v1URL: baseURL + '/v1',
 };
 
 export const getHeaders = () => {
-    const headers: { 'Authorization'?: string } = {};
+    const headers: { 'token'?: string } = {};
     const token = LocalStorage.getToken();
     if (token) {
-        headers['Authorization'] = token;
+        headers['token'] = token;
     }
     return headers;
 };
 
-// 上传图片配置
-export const uploadImageConfig: UploadProps = {
-    action: config.v1URL + '/upload/image',
-    method: 'POST',
-    headers: getHeaders(),
-    accept: ['.png', '.jpg', '.jpeg'].join(','),
-};
-
-// 上传Excel配置
-export const uploadExcelConfig: UploadProps = {
-    action: config.v1URL + '/upload/excel',
-    method: 'POST',
-    headers: getHeaders(),
-    accept: ['.xls', '.xlsx'].join(','),
-};
-
-// 后置上传
-export const afterUpload = (file: UploadFile) => {
-    if (file.status === 'done') {// 上传成功
-        const { code, msg } = file.response;
-        if (code === 200) {
-            message.success('上传成功');
-        } else {
-            message.error(msg);
-        }
-    } else if (file.status === 'error') {// 上传失败
-        message.error('上传失败');
-    }
-}
-
 export default config;

src/apis/index.ts

@@ -1,9 +1,8 @@
 import api from './api';
-import config from './config';
 
 // Api参数类型
 export type LoginApiParams = {
-    account: string,
+    userName: string,
     password: string,
 };
 
@@ -13,12 +12,12 @@ export type LogoutApi = () => Promise<any>;
 
 // 登录
 const loginApi: LoginApi = async (data) => {
-    return api.post('/auth/login', data, { baseURL: config.v1URL });
+    return api.post('/login', data);
 };
 
 // 登出
 const logoutApi: LogoutApi = async () => {
-    return api.post('/auth/logout', {}, { baseURL: config.v1URL });
+    return api.post('/logout', {});
 };
 
 export const apis = {

src/pages/login/index.tsx

@@ -9,7 +9,7 @@ import './style.less';
 
 const FormItem = Form.Item;
 
-const LoginApp: React.FC = () => {
+const Login: React.FC = () => {
     const {
         state,
         onClickLogin,
@@ -83,10 +83,10 @@ const LoginApp: React.FC = () => {
                                 onClick={() => {
                                     form.validateFields().then(async (values) => {
                                         const data = {
-                                            account: values.account,
-                                            password: values.password
+                                            userName: values.account,
+                                            password: values.password,
                                         }
-                                        await onClickLogin(data);
+                                        await onClickLogin(data, values.remember);
                                     }).catch((error) => {
                                         console.error(error);
                                     });
@@ -103,4 +103,4 @@ const LoginApp: React.FC = () => {
     );
 };
 
-export default observer(LoginApp);
+export default observer(Login);

src/pages/login/store.tsx

@@ -26,31 +26,24 @@ const useLoginStore = (): LoginStore => {
 
     const api = {
         // 登录
-        login: async (data: LoginApiParams) => {
+        login: async (data: LoginApiParams, remember: boolean) => {
             actions.setButtonLoading(true);
             try {
-                // const res = await apis.login(data);
-                const res = {
-                    data: {
-                        token: '123',
-                        user_id: 1,
-                        user_name: '123',
-                    },
-                }
+                const res = await apis.login(data);
                 const info = res.data;
                 LocalStorage.setToken(info.token);
                 LocalStorage.setUserInfo({
-                    id: info.user_id,
-                    name: info.user_name,
+                    id: info.userId,
+                    name: info.nickName,
                 });
-                // if (state.rememberChecked) {// 记住密码
-                //     LocalStorage.setAccountPassword({
-                //         account: data.account,
-                //         password: data.password,
-                //     });
-                // } else {// 不记住密码
-                //     LocalStorage.setAccountPassword(undefined);
-                // }
+                if (remember) {// 记住密码
+                    LocalStorage.setAccountPassword({
+                        account: data.userName,
+                        password: data.password,
+                    });
+                } else {// 不记住密码
+                    LocalStorage.setAccountPassword(undefined);
+                }
                 router.navigate({ pathname: '/' }, { replace: true });
                 message.success('登录成功');
             } catch (error: any) {
@@ -63,9 +56,9 @@ const useLoginStore = (): LoginStore => {
     }
 
     // 点击登录
-    const onClickLogin: LoginStore['onClickLogin'] = async (data) => {
+    const onClickLogin: LoginStore['onClickLogin'] = async (data, remember) => {
         // 登录
-        await api.login(data);
+        await api.login(data, remember);
     }
 
     // 初始渲染

src/pages/login/types.ts

@@ -17,7 +17,7 @@ export type StateAction = {
 // 仓库类型
 export type LoginStore = {
     state: ReadonlyState,
-    onClickLogin: (data: LoginApiParams) => Promise<any>,
+    onClickLogin: (data: LoginApiParams, remember: boolean) => Promise<any>,
     init: (form: FormInstance) => void,
     reset: () => void,
 };