From cb9c827220b7691c43299e704c878049cb2701d7 Mon Sep 17 00:00:00 2001
From: landaiqing <3517283258@qq.com>
Date: Tue, 28 May 2024 02:07:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E5=AE=88=E5=8D=AB=E4=B8=8E=E6=8B=A6=E6=88=AA=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                        | 10 +++++
 src/main.tsx                       | 10 ++---
 src/router/guard.ts                | 62 ++++++++++++++++++++++++++++++
 src/router/{index.ts => routes.ts} |  8 ++--
 src/views/404/404.tsx              |  2 +-
 5 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 src/App.tsx
 create mode 100644 src/router/guard.ts
 rename src/router/{index.ts => routes.ts} (91%)

diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..c350d53
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,10 @@
+/** @format */
+
+import routes from "@/router/routes.ts";
+import { RouterGuard } from "@/router/guard.ts";
+
+function App() {
+	return <div className="App">{RouterGuard(routes)}</div>;
+}
+
+export default App;
diff --git a/src/main.tsx b/src/main.tsx
index 06327d4..57c471f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,19 +2,19 @@
 
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import "./assets/styles/index.less";
-import routeConfig from "./router";
 import "virtual:svg-icons-register";
 import { Provider as MobxProvider } from "mobx-react";
 import { RootStore } from "@/store";
+import { BrowserRouter } from "react-router-dom";
+import App from "@/App.tsx";
 
-const router = createBrowserRouter(routeConfig);
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
 		<MobxProvider {...RootStore}>
-			<RouterProvider router={router} />
+			<BrowserRouter>
+				<App />
+			</BrowserRouter>
 		</MobxProvider>
-		,
 	</React.StrictMode>,
 );
diff --git a/src/router/guard.ts b/src/router/guard.ts
new file mode 100644
index 0000000..1d2fac6
--- /dev/null
+++ b/src/router/guard.ts
@@ -0,0 +1,62 @@
+/** @format */
+
+import { message } from "antd";
+import { useEffect } from "react";
+import {
+	Location,
+	NavigateFunction,
+	RouteObject,
+	useLocation,
+	useNavigate,
+	useRoutes,
+} from "react-router-dom";
+import localforage from "localforage";
+
+//递归查询对应的路由
+export function searchRouteDetail(path: string, routes: RouteObject[]): RouteObject | null {
+	for (const item of routes) {
+		if (item.path === path) return item;
+		if (item.children) {
+			return searchRouteDetail(path, item.children);
+		}
+	}
+	return null;
+}
+
+//全局路由守卫
+async function guard(location: Location, navigate: NavigateFunction, routes: RouteObject[]) {
+	const { pathname } = location;
+
+	//找到对应的路由信息
+	const routedetail: RouteObject | null = searchRouteDetail(pathname, routes);
+
+	//没有找到路由，跳转404
+	if (!routedetail) {
+		navigate("/404");
+		return false;
+	}
+	//如果需要权限验证
+	if (
+		routedetail.path !== "/login" &&
+		routedetail.path !== "/register" &&
+		routedetail.path !== "/" &&
+		routedetail.path !== "/404"
+	) {
+		const token: string | null = await localforage.getItem("token");
+		if (!token) {
+			message.warning("请先登录！").then();
+			navigate("/login");
+			return false;
+		}
+	}
+	return true;
+}
+
+export const RouterGuard = (routes: RouteObject[]) => {
+	const location: Location<any> = useLocation();
+	const navigate: NavigateFunction = useNavigate();
+	useEffect(() => {
+		guard(location, navigate, routes).then();
+	}, [location, navigate, routes]);
+	return useRoutes(routes);
+};
diff --git a/src/router/index.ts b/src/router/routes.ts
similarity index 91%
rename from src/router/index.ts
rename to src/router/routes.ts
index bd09ac0..c8f0463 100644
--- a/src/router/index.ts
+++ b/src/router/routes.ts
@@ -15,14 +15,14 @@ const routes: RouteObject[] = [
 		path: "/",
 		Component: (props) => ComponentLoading(home, props),
 	},
-	{
-		path: "*",
-		Component: NoFound,
-	},
 	{
 		path: "/register",
 		Component: (props) => ComponentLoading(Register, props),
 	},
+	{
+		path: "/404",
+		Component: (props) => ComponentLoading(NoFound, props),
+	},
 	{
 		path: "/login",
 		Component: (props) => ComponentLoading(Login, props),
diff --git a/src/views/404/404.tsx b/src/views/404/404.tsx
index c7ba3eb..a155e45 100644
--- a/src/views/404/404.tsx
+++ b/src/views/404/404.tsx
@@ -7,7 +7,7 @@ import { useEffect } from "react";
 export default () => {
 	const navigate = useNavigate();
 	const goBack = () => {
-		navigate(-1);
+		navigate(-2);
 	};
 	useEffect(() => {
 		document.body.classList.add("not-fount-body");