From bfda92dd3a344f379f2a0510158109ea73a82547 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com> Date: Fri, 3 Mar 2023 11:37:36 +0800 Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E8=B7=B3=E8=BD=AC=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E7=99=BB=E5=BD=95=E7=9B=B8=E5=85=B3store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/App.tsx | 25 +++++++++-- src/compenents/header/Header.module.css | 6 --- src/compenents/header/Header.tsx | 40 +++++++++++++---- src/pages/course/vod/Vod.tsx | 2 +- src/pages/course/vod/index.ts | 2 +- src/pages/login/Login.tsx | 17 ++++++- src/store/hooks.ts | 7 +++ src/store/store.ts | 33 +++----------- src/store/user/userActions.ts | 59 +++++++++++++++++++++++++ src/store/user/userReducer.ts | 33 ++++++++++++++ 11 files changed, 174 insertions(+), 51 deletions(-) create mode 100644 src/store/hooks.ts create mode 100644 src/store/user/userActions.ts create mode 100644 src/store/user/userReducer.ts diff --git a/package.json b/package.json index 9426927..a149584 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-router-dom": "^6.8.2", "react-scripts": "5.0.1", "redux": "^4.2.1", + "redux-thunk": "^2.4.2", "typescript": "^4.4.2", "web-vitals": "^2.1.0" }, diff --git a/src/App.tsx b/src/App.tsx index 72319b8..d8e35c4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,9 +3,25 @@ import styles from "./App.module.css"; import { useLocation, useRoutes, useNavigate } from "react-router-dom"; import routes from "./router/routes"; import { getToken } from "./utils/index"; +import { login } from "./api/index"; +import { useDispatch } from "react-redux"; +import { + IsLoginActionCreator, + SetUserActionCreator, + SetPermisssionsActionCreator, +} from "./store/user/userActions"; function App() { const Views = () => useRoutes(routes); + const dispatch = useDispatch(); + const getUser = () => { + login.getUser().then((res: any) => { + const data = res.data; + dispatch(IsLoginActionCreator()); + dispatch(SetUserActionCreator(data.user)); + dispatch(SetPermisssionsActionCreator(data.permissions)); + }); + }; // const CheckLogin = () => { // const navigate = useNavigate(); // const location = useLocation(); @@ -13,10 +29,11 @@ function App() { // navigate("/login"); // } // }; - // const token = getToken(); - // if (!token) { - // CheckLogin(); - // } + const token = getToken(); + if (token) { + getUser(); + } + return (
diff --git a/src/compenents/header/Header.module.css b/src/compenents/header/Header.module.css index a7044a8..66b5cc2 100644 --- a/src/compenents/header/Header.module.css +++ b/src/compenents/header/Header.module.css @@ -2,7 +2,6 @@ background-color: white !important; } - .main-header { width: 100%; background-color: white !important; @@ -24,8 +23,3 @@ align-items: center; } -.title { - line-height: 64px !important; - display: inline; - color: #03a9f4 !important; -} diff --git a/src/compenents/header/Header.tsx b/src/compenents/header/Header.tsx index 65e378b..ef61235 100644 --- a/src/compenents/header/Header.tsx +++ b/src/compenents/header/Header.tsx @@ -1,22 +1,44 @@ import React from "react"; import styles from "./Header.module.css"; -import logo from "../../assets/logo.png"; -import { Layout, Typography, Menu, Button, Dropdown, MenuProps } from "antd"; -import { Link } from "react-router-dom"; - - +import { Layout, Typography, Button, Dropdown, MenuProps } from "antd"; +import { useSelector } from "../../store/hooks"; +import { useDispatch } from "react-redux"; +import { useNavigate } from "react-router-dom"; +import { LoginOutActionCreator } from "../../store/user/userActions"; export const Header: React.FC = () => { + const dispatch = useDispatch(); + const navigate = useNavigate(); + const user = useSelector((state: any) => state.user); + const onClick: MenuProps["onClick"] = ({ key }) => { + if (key === "login_out") { + dispatch(LoginOutActionCreator()); + navigate("/login"); + } else if (key === "edit_password") { + navigate("/editPasswor"); + } + }; - + const items: MenuProps["items"] = [ + { + label: "修改密码", + key: "edit_password", + }, + { + label: "退出登录", + key: "login_out", + }, + ]; return (
- - - + + +
diff --git a/src/pages/course/vod/Vod.tsx b/src/pages/course/vod/Vod.tsx index 319bf46..a8fe15c 100644 --- a/src/pages/course/vod/Vod.tsx +++ b/src/pages/course/vod/Vod.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import { Typography, Input, Select, Button, Space, Table } from "antd"; import type { ColumnsType } from "antd/es/table"; -import styles from "./Index.module.css"; +import styles from "./Vod.module.css"; import { PlusOutlined, ReloadOutlined } from "@ant-design/icons"; import { login } from "../../../api/index"; diff --git a/src/pages/course/vod/index.ts b/src/pages/course/vod/index.ts index 277564f..180235b 100644 --- a/src/pages/course/vod/index.ts +++ b/src/pages/course/vod/index.ts @@ -1 +1 @@ -export * from "./Vod"; \ No newline at end of file +export * from "./Vod" \ No newline at end of file diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index 26c56d6..e2b5a44 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -3,8 +3,17 @@ import styles from "./Login.module.css"; import { Typography, Spin, Input, Button, message } from "antd"; import { login, system } from "../../api/index"; import { setToken } from "../../utils/index"; +import { useDispatch } from "react-redux"; +import { + IsLoginActionCreator, + SetUserActionCreator, + SetPermisssionsActionCreator, +} from "../../store/user/userActions"; +import { useNavigate } from "react-router-dom"; export const Login: React.FC = () => { + const dispatch = useDispatch(); + const navigate = useNavigate(); const [loading, setLoading] = useState(true); const [image, setImage] = useState(""); const [email, setEmail] = useState(""); @@ -57,8 +66,12 @@ export const Login: React.FC = () => { }; const getUser = () => { - login.getUser().then((res) => { - console.log(res); + login.getUser().then((res: any) => { + const data = res.data; + dispatch(IsLoginActionCreator()); + dispatch(SetUserActionCreator(data.user)); + dispatch(SetPermisssionsActionCreator(data.permissions)); + navigate("/"); }); }; diff --git a/src/store/hooks.ts b/src/store/hooks.ts new file mode 100644 index 0000000..30a43f7 --- /dev/null +++ b/src/store/hooks.ts @@ -0,0 +1,7 @@ +import { + useSelector as useReduxSelector, + TypedUseSelectorHook, +} from "react-redux"; +import { RootState } from "./store"; + +export const useSelector: TypedUseSelectorHook = useReduxSelector; diff --git a/src/store/store.ts b/src/store/store.ts index 002253e..69101bd 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -1,30 +1,7 @@ +import { createStore, applyMiddleware } from "redux"; +import userReducer from "./user/userReducer"; +import thunk from "redux-thunk"; -import { createStore } from "redux"; -interface IAction { - type: string; - payload?: any; -} -interface IState { - isshow: boolean; -} -const reducer = ( - preState: IState = { - isshow: false, - }, - action: IAction -) => { - const { type } = action; - const newState = { ...preState }; - switch (type) { - case "show": - newState.isshow = true; - return newState; - case "hidden": - newState.isshow = false; - return newState; - default: - return preState; - } -}; -const store = createStore(reducer); +const store = createStore(userReducer, applyMiddleware(thunk)); +export type RootState = ReturnType; export default store; diff --git a/src/store/user/userActions.ts b/src/store/user/userActions.ts new file mode 100644 index 0000000..c22d246 --- /dev/null +++ b/src/store/user/userActions.ts @@ -0,0 +1,59 @@ +import { message } from "antd"; + +export const IS_LOGIN = "IS_LOGIN"; +export const LOGIN_OUT = "LOGIN_OUT"; +export const SET_USER = "SET_USER"; +export const SET_PERMISSSIONS = "SET_PERMISSSIONS"; + +interface IsLoginAction { + type: typeof IS_LOGIN; +} + +interface LoginOutAction { + type: typeof LOGIN_OUT; +} + +interface SetUserAction { + type: typeof SET_USER; + payload: any; +} + +interface SetPermisssionsAction { + type: typeof SET_PERMISSSIONS; + payload: any; +} + +export type UserLoginAction = + | IsLoginAction + | LoginOutAction + | SetUserAction + | SetPermisssionsAction; + +export const IsLoginActionCreator = (): IsLoginAction => { + return { + type: IS_LOGIN, + }; +}; + +export const LoginOutActionCreator = (): LoginOutAction => { + message.success("已退出登录"); + return { + type: LOGIN_OUT, + }; +}; + +export const SetUserActionCreator = (data: any): SetUserAction => { + return { + type: SET_USER, + payload: data, + }; +}; + +export const SetPermisssionsActionCreator = ( + data: any +): SetPermisssionsAction => { + return { + type: SET_PERMISSSIONS, + payload: data, + }; +}; diff --git a/src/store/user/userReducer.ts b/src/store/user/userReducer.ts new file mode 100644 index 0000000..aa496d8 --- /dev/null +++ b/src/store/user/userReducer.ts @@ -0,0 +1,33 @@ +import { + UserLoginAction, + IS_LOGIN, + LOGIN_OUT, + SET_USER, + SET_PERMISSSIONS, +} from "./userActions"; + +interface UserState { + permisssions: any[]; + user: any[]; + isLogin: boolean; +} +export const defaultState: UserState = { + isLogin: false, + permisssions: [], + user: [], +}; + +export default (state = defaultState, action: UserLoginAction) => { + switch (action.type) { + case IS_LOGIN: + return { ...state, isLogin: true }; + case LOGIN_OUT: + return { ...state, isLogin: false, user: [], permisssions: [] }; + case SET_USER: + return { ...state, user: action.payload }; + case SET_PERMISSSIONS: + return { ...state, permisssions: action.payload }; + default: + return state; + } +};