diff --git a/src/routes/ProtectedRoute.tsx b/src/routes/ProtectedRoute.tsx
new file mode 100644
index 0000000..238fdf4
--- /dev/null
+++ b/src/routes/ProtectedRoute.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useAppSelector, useAppDispatch } from '../store/hooks'; // 导入 hooks
+import { useNavigate } from 'react-router';
+import { refreshToken } from '../feature/auth/authSlice'; // 导入刷新 token 的 thunk
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
+  const { isAuth, token } = useAppSelector((state) => state.auth);
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    const tryRefreshToken = async () => {
+      if (!token) {
+        navigate('/login'); // 如果没有 token，跳转到登录页
+      }
+      if (!isAuth && token) {
+        try {
+          await dispatch(refreshToken(token)).unwrap(); // 尝试刷新 token
+        } catch {
+          navigate('/login');
+        }
+      }
+    };
+
+    tryRefreshToken(); // 执行 token 刷新
+  }, [isAuth, token, dispatch, navigate]);
+
+  // 如果已认证则渲染 children，否则返回 null
+  return isAuth ? <>{children}</> : null;
+};
+
+export default ProtectedRoute;
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
new file mode 100644
index 0000000..585b1f6
--- /dev/null
+++ b/src/routes/routes.ts
@@ -0,0 +1,29 @@
+import { createBrowserRouter } from "react-router";
+import Home from "../feature/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";
+
+export default createBrowserRouter([
+  {
+    Component: AppLayout,
+    children: [
+      {
+        path: "/",
+        // 使用 ProtectedRoute 来包裹需要保护的页面
+        element: withProtect(Home),
+      },
+      {
+        Component: AuthLayout,
+        children: [
+          { path: "login", Component: Login },
+          { path: "register", Component: Register },
+          { path: "forget", Component: Forget },
+        ],
+      },
+    ],
+  },
+]);
diff --git a/src/routes/withProtect.ts b/src/routes/withProtect.ts
new file mode 100644
index 0000000..bcde943
--- /dev/null
+++ b/src/routes/withProtect.ts
@@ -0,0 +1,10 @@
+import React from 'react';
+import ProtectedRoute from './ProtectedRoute'; 
+
+const withProtect = (Component: React.ComponentType) => {
+  return React.createElement(ProtectedRoute, {
+    children: React.createElement(Component)
+  });
+};
+
+export default withProtect;
\ No newline at end of file