登录跳转以及登录相关store

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"
   },

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 (
     <div className={styles.App}>
       <Views />

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;
-}

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 (
     <div className={styles["app-header"]}>
       <Layout.Header className={styles["main-header"]}>
         <div></div>
         <Button.Group className={styles["button-group"]}>
-          <Link style={{ textDecoration: "none" }} to={`/login`}>
-            <Button>登录</Button>
-          </Link>
+          <Dropdown menu={{ items, onClick }} placement="bottomRight">
+            <Button type="link" danger>
+              {user.name}
+            </Button>
+          </Dropdown>
         </Button.Group>
       </Layout.Header>
     </div>

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";
 

src/pages/course/vod/index.ts

@@ -1 +1 @@
-export * from "./Vod";
+export * from "./Vod"

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<boolean>(true);
   const [image, setImage] = useState<string>("");
   const [email, setEmail] = useState<string>("");
@@ -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("/");
     });
   };
 

src/store/hooks.ts

@@ -0,0 +1,7 @@
+import {
+  useSelector as useReduxSelector,
+  TypedUseSelectorHook,
+} from "react-redux";
+import { RootState } from "./store";
+
+export const useSelector: TypedUseSelectorHook<RootState> = useReduxSelector;

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<typeof store.getState>;
 export default store;

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,
+  };
+};

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;
+  }
+};