完成Work组件的界面和一些小修改
> 1. 修改优化路由守卫
> 2. 去除拦截器中的调试信息
> 3. 修改头部导航条下拉菜单的样式增加图标。
> 4. work组件现在使用mock数据
Change-Id: Ic602a35bb02e645a0d5253c5cbd12a68d70bfb33
diff --git a/src/routes/ProtectedRoute.tsx b/src/routes/ProtectedRoute.tsx
index 238fdf4..2764f5a 100644
--- a/src/routes/ProtectedRoute.tsx
+++ b/src/routes/ProtectedRoute.tsx
@@ -1,7 +1,10 @@
-import React, { useEffect } from 'react';
-import { useAppSelector, useAppDispatch } from '../store/hooks'; // 导入 hooks
+// src/routes/ProtectedRoute.tsx
+
+import React, { useEffect, useState } from 'react';
+import { useAppSelector, useAppDispatch } from '../store/hooks';
import { useNavigate } from 'react-router';
-import { refreshToken } from '../feature/auth/authSlice'; // 导入刷新 token 的 thunk
+import { refreshToken } from '../feature/auth/authSlice';
+import { Spin } from 'antd';
interface ProtectedRouteProps {
children: React.ReactNode;
@@ -11,26 +14,68 @@
const { isAuth, token } = useAppSelector((state) => state.auth);
const navigate = useNavigate();
const dispatch = useAppDispatch();
+ const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const tryRefreshToken = async () => {
+ // 如果没有token，直接跳转到登录页
if (!token) {
- navigate('/login'); // 如果没有 token，跳转到登录页
+ navigate('/login', { replace: true });
+ return;
}
+
+ // 如果有token但未认证，尝试刷新token
if (!isAuth && token) {
+ setIsLoading(true);
try {
- await dispatch(refreshToken(token)).unwrap(); // 尝试刷新 token
- } catch {
- navigate('/login');
+ await dispatch(refreshToken(token)).unwrap();
+ } catch (error) {
+ console.error('Token refresh failed:', error);
+ navigate('/login', { replace: true });
+ } finally {
+ setIsLoading(false);
}
}
};
- tryRefreshToken(); // 执行 token 刷新
+ tryRefreshToken();
}, [isAuth, token, dispatch, navigate]);
- // 如果已认证则渲染 children，否则返回 null
- return isAuth ? <>{children}</> : null;
+ // 显示加载状态
+ if (isLoading) {
+ return (
+ <div style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100vh'
+ }}>
+ <Spin size="large" tip="验证身份中..." />
+ </div>
+ );
+ }
+
+ // 如果没有token，返回null（会触发导航）
+ if (!token) {
+ return null;
+ }
+
+ // 如果已认证，渲染children
+ if (isAuth) {
+ return <>{children}</>;
+ }
+
+ // 如果有token但还在验证中，显示加载状态
+ return (
+ <div style={{
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100vh'
+ }}>
+ <Spin size="large" tip="验证身份中..." />
+ </div>
+ );
};
-export default ProtectedRoute;
+export default ProtectedRoute;
\ No newline at end of file
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 585b1f6..3bb3135 100644
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -1,29 +1,45 @@
+// src/routes/routes.ts
+
import { createBrowserRouter } from "react-router";
-import Home from "../feature/Home";
+import Home from "../feature/home/Home";
import AuthLayout from "../feature/auth/AuthLayout";
import Login from "../feature/auth/Login";
import Register from "../feature/auth/Register";
import Forget from "../feature/auth/Forget";
import AppLayout from "../AppLayout";
import withProtect from "./withProtect";
+import Work from "../feature/work/Work";
+import CreateWork from "../feature/work/CreateWork";
+// 创建受保护的组件
+const ProtectedHome = withProtect(Home);
+const ProtectedWork = withProtect(Work);
+const ProtectedCreatWork = withProtect(CreateWork)
export default createBrowserRouter([
{
+ path: "/",
Component: AppLayout,
children: [
{
path: "/",
- // 使用 ProtectedRoute 来包裹需要保护的页面
- element: withProtect(Home),
+ Component: ProtectedHome,
},
{
Component: AuthLayout,
children: [
- { path: "login", Component: Login },
- { path: "register", Component: Register },
- { path: "forget", Component: Forget },
+ { path: "/login", Component: Login },
+ { path: "/register", Component: Register },
+ { path: "/forget", Component: Forget },
],
},
+ {
+ path: "/work/:work_id",
+ Component: ProtectedWork,
+ },
+ {
+ path:"/work/creat",
+ Component: ProtectedCreatWork
+ }
],
},
-]);
+]);
\ No newline at end of file
diff --git a/src/routes/withProtect.ts b/src/routes/withProtect.ts
index bcde943..f8ea125 100644
--- a/src/routes/withProtect.ts
+++ b/src/routes/withProtect.ts
@@ -1,10 +1,14 @@
-import React from 'react';
-import ProtectedRoute from './ProtectedRoute';
+// src/routes/withProtect.ts
-const withProtect = (Component: React.ComponentType) => {
- return React.createElement(ProtectedRoute, {
- children: React.createElement(Component)
- });
+import React from 'react';
+import ProtectedRoute from './ProtectedRoute';
+
+const withProtect = <P extends object>(Component: React.ComponentType<P>) => {
+ return function ProtectedComponent(props: P) {
+ return React.createElement(ProtectedRoute, {
+ children: React.createElement(Component, props)
+ });
+ };
};
export default withProtect;
\ No newline at end of file