Route guards, WS lifecycle, ticket stats. Refs EventHub/EventHubFrontAdmin#3

src/components/ProtectedRoute.tsx

@@ -1,32 +1,33 @@
-import React from 'react';
-import { Navigate, Outlet } from 'react-router-dom';
-import { Spin } from 'antd';
-import { useAuthStore } from '../store/authStore';
-
-interface Props {
-    allowedRoles?: string[];
-}
-
-const ProtectedRoute: React.FC<Props> = ({ allowedRoles }) => {
-    const { isAuthenticated, isInitialized, user } = useAuthStore();
-
-    if (!isInitialized) {
-        return (
-            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
-                <Spin size="large" />
-            </div>
-        );
-    }
-
-    if (!isAuthenticated) {
-        return <Navigate to="/login" replace />;
-    }
-
-    if (allowedRoles && user && !allowedRoles.includes(user.role)) {
-        return <Navigate to="/dashboard" replace />;
-    }
-
-    return <Outlet />;
-};
-
-export default ProtectedRoute;
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { Spin } from 'antd';
+import { useAuthStore } from '../store/authStore';
+import ForbiddenPage from '../pages/errors/ForbiddenPage';
+
+interface Props {
+    allowedRoles?: string[];
+}
+
+const ProtectedRoute: React.FC<Props> = ({ allowedRoles }) => {
+    const { isAuthenticated, isInitialized, user } = useAuthStore();
+
+    if (!isInitialized) {
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+                <Spin size="large" />
+            </div>
+        );
+    }
+
+    if (!isAuthenticated) {
+        return <Navigate to="/login" replace />;
+    }
+
+    if (allowedRoles && user && !allowedRoles.includes(user.role)) {
+        return <ForbiddenPage />;
+    }
+
+    return <Outlet />;
+};
+
+export default ProtectedRoute;

src/components/RoleGuard.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { useAuthStore } from '../store/authStore';
+import ForbiddenPage from '../pages/errors/ForbiddenPage';
+import type { AdminRole } from '../config/adminAccess';
+
+interface Props {
+    allowedRoles?: AdminRole[];
+}
+
+/** Ограничение вложенных маршрутов по роли (после аутентификации). */
+const RoleGuard: React.FC<Props> = ({ allowedRoles }) => {
+    const user = useAuthStore((s) => s.user);
+
+    if (allowedRoles && user && !allowedRoles.includes(user.role as AdminRole)) {
+        return <ForbiddenPage />;
+    }
+
+    return <Outlet />;
+};
+
+export default RoleGuard;