完成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