登录页面初步

src/App.tsx

@@ -1,10 +1,22 @@
 import React from "react";
 import styles from "./App.module.css";
-import { useRoutes } from "react-router-dom";
+import { useLocation, useRoutes, useNavigate } from "react-router-dom";
 import routes from "./router/routes";
+import { getToken } from "./utils/index";
 
 function App() {
   const Views = () => useRoutes(routes);
+  // const CheckLogin = () => {
+  //   const navigate = useNavigate();
+  //   const location = useLocation();
+  //   if (location.pathname !== "/login") {
+  //     navigate("/login");
+  //   }
+  // };
+  // const token = getToken();
+  // if (!token) {
+  //   CheckLogin();
+  // }
   return (
     <div className={styles.App}>
       <Views />

src/api/internal/httpClient.ts

@@ -1,6 +1,12 @@
 import axios, { Axios, AxiosResponse } from "axios";
 import { message } from "antd";
 import { getToken, clearToken } from "../../utils/index";
+import { useNavigate } from "react-router-dom";
+
+const GoLogin = () => {
+  const navigate = useNavigate();
+  navigate("/login");
+};
 
 export class HttpClient {
   axios: Axios;
@@ -10,9 +16,9 @@ export class HttpClient {
       baseURL: url,
       timeout: 15000,
       withCredentials: false,
-      headers:{
+      headers: {
-        "Accept":"application/json"
+        Accept: "application/json",
-      }
+      },
     });
 
     //拦截器注册
@@ -46,6 +52,7 @@ export class HttpClient {
         if (status === 401) {
           clearToken();
           // 跳转到登录界面
+          GoLogin();
         } else if (status === 404) {
           // 跳转到404页面
         } else if (status === 403) {

src/pages/course/vod/Vod.tsx

@@ -64,7 +64,7 @@ const data: DataType[] = [
 
 export const VodListPage: React.FC = () => {
   useEffect(() => {
-    login.login("1@qq.com", "123123", "1", "2");
+    
   }, []);
   const handleChange = (e: any) => {
     console.log(e);

src/pages/home/HomePage.tsx

@@ -3,16 +3,11 @@ import styles from "./HomePage.module.css";
 import { Outlet, useNavigate } from "react-router-dom";
 import { Header, LeftMenu, Footer } from "../../compenents";
 import { login } from "../../api/index";
-import { getToken, clearToken } from "../../utils/index";
+
 
 export const HomePage: React.FC = () => {
-  // const token = getToken();
-  // const navigate = useNavigate();
-  // if (token === "") {
-  //   navigate("/login");
-  // }
   useEffect(() => {
-    login.login("1@qq.com", "123123", "1", "2");
+   
   }, []);
 
   return (

src/pages/login/Login.tsx

@@ -4,9 +4,9 @@ import { Typography, Spin, Input, Button, message } from "antd";
 import { login, system } from "../../api/index";
 import { setToken } from "../../utils/index";
 
-export const Login: React.FC = (defaultState) => {
+export const Login: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(true);
-  const [captchaList, setCourse] = useState<any>(null);
+  const [image, setImage] = useState<string>("");
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [captcha_val, setCaptcha_val] = useState<string>("");
@@ -14,7 +14,7 @@ export const Login: React.FC = (defaultState) => {
   const fetchData = () => {
     setLoading(true);
     system.getImageCaptcha().then((res: any) => {
-      setCourse(res.data);
+      setImage(res.data.image);
       setCaptcha_key(res.data.key);
       setLoading(false);
     });
@@ -65,7 +65,7 @@ export const Login: React.FC = (defaultState) => {
   useEffect(() => {
     fetchData();
   }, []);
- 
+
   return (
     <div className={styles["login-content"]}>
       <div className={styles["login-box"]}>
@@ -105,7 +105,7 @@ export const Login: React.FC = (defaultState) => {
             <img
               className={styles["captcha"]}
               onClick={fetchData}
-              src={captchaList.image}
+              src={image}
               alt=""
             />
           </div>