提交 7c4bd79a 作者: ZhangLingKun

功能:用户登录

上级 4c27b645
import { InterFunction } from '~/api/interface';
// 用户登录
export type BackEndLoginType = InterFunction<
{ accountNo: string; passWord: string },
{ accountNo: string; passWord: string; remember?: boolean },
{
token: string;
userAccountId: number;
......
......@@ -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}>
<App />
<Provider store={store}>
<App />
</Provider>
</ConfigProvider>,
// </React.StrictMode>,
);
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);
}
// 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);
};
useEffect(() => {
const remember = Cookies.get('remember');
// console.log("remember--->", remember);
if (remember === 'true') {
form.setFieldsValue({
accountNo: Cookies.get('username'),
passWord: Cookies.get('password'),
});
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 {
// console.log("执行了-->");
form.setFieldsValue({
remember: false,
});
message.error('登录失败,请检查账号信息');
}
}, []);
// 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('请先配置权限');
// }
// TODO: 获取用户权限
// 模拟获取用户权限成功
// 获取用户能使用的全部路由
// 获取用户路由列表
// 获取第一个路由
await getFirstRoute();
};
// 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;
// }, []);
// 获取第一个路由
const getFirstRoute = () => {
// TODO: 获取第一个路由
// 获取第一个路由
// console.log('获取第一个路由--->', route);
// navigate(route[0].path);
navigate('/orderManage/productOrder');
};
// componentDidMount
useEffect(() => {
// 是否保存密码
const remember = Boolean(Cookies.get('remember'));
if (!remember) return;
// 如果保存了密码
form.setFieldsValue({
accountNo: Cookies.get('username'),
passWord: Cookies.get('password'),
remember: Boolean(Cookies.get('remember')),
});
}, []);
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: '请输入用户名' }]}>
......
import { useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux';
import type { RootState, AppDispatch } from '../index';
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
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;
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;
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;
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
const stateSlice = createSlice({
name: 'ghj',
initialState: {
num: 1,
},
reducers: {
add: (state) => {
state.num += 1;
},
},
});
export default stateSlice;
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论