feat(auth): 实现登录注册功能并重构 App 组件
- 新增登录和注册页面组件
- 实现用户认证和权限管理逻辑
- 重构 App 组件，使用 Router 和 AuthProvider
- 添加管理员面板和论坛页面组件
Change-Id: Iaa4502616970e75e3268537f73c75dac8f60e24d
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;