diff --git a/src/routes/PermissionRoute.jsx b/src/routes/PermissionRoute.jsx
index b390011..290c619 100644
--- a/src/routes/PermissionRoute.jsx
+++ b/src/routes/PermissionRoute.jsx
@@ -1,18 +1,48 @@
-import React from 'react';
-import { Navigate } from 'react-router-dom';
+import React from "react";
+import { Navigate, useLocation } from "react-router-dom";
+import { useAuth } from "../features/auth/contexts/AuthContext"; // 更新路径
+import { Spin, Result, Button } from "antd";
 
-const PermissionRoute = ({ requiredRoles, children }) => {
-  // 从localStorage获取用户信息
-  const user = JSON.parse(localStorage.getItem('user') || '{}');
-  const userRole = user.role || 'guest';
-  
-  // 检查用户是否有所需角色
-  if (requiredRoles.includes(userRole)) {
-    return children;
+const PermissionRoute = ({ children, requiredRoles }) => {
+  const { user, isAuthenticated, loading, hasRole } = useAuth();
+  const location = useLocation();
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        <Spin size="large" tip="检查权限中..." />
+      </div>
+    );
   }
-  
-  // 如果没有权限，重定向到未授权页面
-  return <Navigate to="/unauthorized" replace />;
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  // 角色检查
+  const hasRequiredRoles = requiredRoles
+    ? requiredRoles.some((role) => hasRole(role)) // 满足任一角色即可
+    : true; // 如果没有指定 requiredRoles，则认为通过
+
+  if (hasRequiredRoles) {
+    return children; // 用户有权限，渲染子组件
+  }
+
+  // 用户无权限
+  return (
+    <Result
+      status="403"
+      title="403 - 禁止访问"
+      subTitle="抱歉，您没有权限访问此页面。"
+      extra={
+        <Button type="primary" onClick={() => window.history.back()}>
+          返回上一页
+        </Button>
+      }
+    />
+  );
+  // 或者重定向到 /unauthorized 页面
+  // return <Navigate to="/unauthorized" state={{ from: location }} replace />;
 };
 
-export default PermissionRoute;
\ No newline at end of file
+export default PermissionRoute;