功能：用户登录

src/api/interface/commonType.ts

 import { InterFunction } from '~/api/interface';
 // 用户登录
 export type BackEndLoginType = InterFunction<
-  { accountNo: string; passWord: string },
+  { accountNo: string; passWord: string; remember?: boolean },
   {
     token: string;
     userAccountId: number;

src/main.tsx

@@ -9,6 +9,8 @@ import './assets/style/index.scss';
 import dayjs from 'dayjs';
 import { themeConfig } from './assets/theme';
 import '~/style/index.scss';
+import { Provider } from 'react-redux';
+import { store } from './store';
 
 dayjs.locale('zh-cn');
 
@@ -17,7 +19,9 @@ const root = ReactDOM.createRoot(document.getElementById('root')!);
 root.render(
   // <React.StrictMode>
   <ConfigProvider locale={zhCN} theme={themeConfig}>
+    <Provider store={store}>
       <App />
+    </Provider>
   </ConfigProvider>,
   // </React.StrictMode>,
 );

src/pages/common/login/index.tsx

-import { Button, Checkbox, Form, Input } from 'antd';
+import { Button, Checkbox, Form, Input, message } from 'antd';
 import { useEffect } from 'react';
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import Cookies from 'js-cookie';
 import './index.scss';
-import { InterDataType, InterReqType } from '~/api/interface';
+import { InterReqType } from '~/api/interface';
 import { BackEndLoginType } from '~/api/interface/commonType';
 import { CommonAPI } from '~/api';
+import { useDispatch } from 'react-redux';
+import { SET_USERINFO } from '~/store/module/userInfo';
 
 // 请求的类型
 type ReqType = InterReqType<BackEndLoginType>;
 // 返回的类型
-type ResType = InterDataType<BackEndLoginType>;
+// type ResType = InterDataType<BackEndLoginType>;
 
 function LoginView() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
   // @ts-ignore
   const navigate = useNavigate();
+  // redux
+  const dispatch = useDispatch();
+  // 表单钩子
   const [form] = Form.useForm<ReqType>();
   // 提交数据
   const onFinish = async (values: ReqType) => {
@@ -25,65 +30,50 @@ function LoginView() {
       passWord: values?.passWord,
     });
     if (res && res.code === '200') {
-      console.log('提交数据 --->', res);
+      const { token } = res.result;
+      Cookies.set('SXTB-TOKEN', token);
+      // 记住密码
+      Cookies.set('password', values?.passWord);
+      Cookies.set('username', values?.accountNo);
+      Cookies.set('remember', String(values?.remember));
+      // 存用户信息
+      dispatch(SET_USERINFO(res.result));
+      // 获取用户的权限
+      await getUserRole();
+      // console.log('提交数据 --->', res, values);
+    } else {
+      message.error('登录失败，请检查账号信息');
     }
-    // props
-    //   .login(values)
-    //   .then(async (res: any) => {
-    //     if (res.code === '200') {
-    //       getUserRole();
-    //     }
-    //   })
-    //   .catch((err: any) => {
-    //     message.error('登录失败，请检查账号信息');
-    //   });
   };
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const onFinishFailed = (errorInfo: any) => {
-    // console.log("Failed:", errorInfo);
+  // 获取用户权限
+  const getUserRole = async () => {
+    // TODO: 获取用户权限
+    // 模拟获取用户权限成功
+    // 获取用户能使用的全部路由
+    // 获取用户路由列表
+    // 获取第一个路由
+    await getFirstRoute();
   };
+  // 获取第一个路由
+  const getFirstRoute = () => {
+    // TODO: 获取第一个路由
+    // 获取第一个路由
+    // console.log('获取第一个路由--->', route);
+    // navigate(route[0].path);
+    navigate('/orderManage/productOrder');
+  };
+  // componentDidMount
   useEffect(() => {
-    const remember = Cookies.get('remember');
-    // console.log("remember--->", remember);
-    if (remember === 'true') {
+    // 是否保存密码
+    const remember = Boolean(Cookies.get('remember'));
+    if (!remember) return;
+    // 如果保存了密码
     form.setFieldsValue({
       accountNo: Cookies.get('username'),
       passWord: Cookies.get('password'),
+      remember: Boolean(Cookies.get('remember')),
     });
-    } else {
-      // console.log("执行了-->");
-      form.setFieldsValue({
-        remember: false,
-      });
-    }
   }, []);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const getUserRole = async () => {
-    // const res: any = await RoleAPI.getListCuserMenuInfo();
-    // if (res.result && res.result.length != 0) {
-    //   localStorage.setItem('routeList', JSON.stringify(res.result || []));
-    //   // console.log("存在的路由--->", getFirstRoute(res.result, route));
-    //   history.push(getFirstRoute(res.result, route)[0].path);
-    // } else {
-    //   message.warning('请先配置权限');
-    // }
-  };
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const getFirstRoute = (routeList: any[], list: any) => {
-    // return list.reduce((pre: any, cur: any) => {
-    //   const bol: boolean = routeList.some((i) => i.id === cur.id);
-    //   if (bol && cur.children) {
-    //     pre.push(...getFirstRoute(routeList, cur.children));
-    //   }
-    //   if (bol && !cur.children) {
-    //     pre.push(cur);
-    //   }
-    //   return pre;
-    // }, []);
-  };
   return (
     <div className='login-warp'>
       <div className='login-view'>
@@ -101,7 +91,6 @@ function LoginView() {
               wrapperCol={{ span: 16, offset: 4 }}
               initialValues={{ remember: true }}
               onFinish={onFinish}
-              onFinishFailed={onFinishFailed}
               autoComplete='off'
             >
               <Form.Item name='accountNo' rules={[{ required: true, message: '请输入用户名' }]}>

src/store/hook/index.ts

-import { useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux';
-import type { RootState, AppDispatch } from '../index';
-
-export const useAppDispatch = () => useDispatch<AppDispatch>();
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/store/index.ts

-import { configureStore } from '@reduxjs/toolkit';
-import stateSlice from '@/store/slice';
+import { configureStore } from "@reduxjs/toolkit";
+import { Menu } from "./module/menu";
+import { UserInfo } from "./module/userInfo";
 
-const store = configureStore({
+export const store = configureStore({
   reducer: {
-    state: stateSlice.reducer,
+    Menu,
+    UserInfo,
   },
 });
-
-export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
-export default store;

src/store/module/menu/index.ts

+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  menuList: JSON.parse(localStorage.getItem('SXTB-ADMIN-MENU-LIST') as string) || [],
+  collapsedActive: false,
+  menuId: JSON.parse(localStorage.getItem('SXTB-ADMIN-MENU-ID') as string) || null,
+};
+
+export const menuSlice = createSlice({
+  name: 'menuSlice',
+  initialState,
+  reducers: {
+    SET_MENU(state, action) {
+      state.menuList = action.payload;
+      localStorage.setItem('SXTB-ADMIN-MENU-LIST', JSON.stringify(action.payload));
+    },
+    SET_COLLAPSE(state, action) {
+      state.collapsedActive = action.payload;
+    },
+    REMOVE_MENU(state) {
+      localStorage.setItem('SXTB-ADMIN-MENU-LIST', JSON.stringify([]));
+      state.menuList = [];
+    },
+    SET_MENU_ID(state, action) {
+      localStorage.setItem('SXTB-ADMIN-MENU-ID', JSON.stringify(action.payload));
+      state.menuId = action.payload;
+    },
+    REMOVE_MENU_ID(state) {
+      localStorage.setItem('SXTB-ADMIN-MENU-ID', JSON.stringify(null));
+      state.menuId = null;
+    },
+  },
+});
+
+export const { SET_MENU, SET_COLLAPSE, REMOVE_MENU, SET_MENU_ID, REMOVE_MENU_ID } =
+  menuSlice.actions;
+
+export const Menu = menuSlice.reducer;

src/store/module/userInfo/index.ts

+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  userInfo: JSON.parse(localStorage.getItem('SXTB-ADMIN-USER-INFO') as string) || [],
+};
+
+export const userInfoSlice = createSlice({
+  name: 'userInfo',
+  initialState,
+  reducers: {
+    SET_USERINFO(state, action) {
+      state.userInfo = action.payload;
+      localStorage.setItem('SXTB-ADMIN-USER-INFO', JSON.stringify(action.payload));
+    },
+  },
+});
+
+export const { SET_USERINFO } = userInfoSlice.actions;
+
+export const UserInfo = userInfoSlice.reducer;

src/store/slice/index.ts

-import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
-
-const stateSlice = createSlice({
-  name: 'ghj',
-  initialState: {
-    num: 1,
-  },
-  reducers: {
-    add: (state) => {
-      state.num += 1;
-    },
-  },
-});
-
-export default stateSlice;