35 lines
992 B
TypeScript
35 lines
992 B
TypeScript
import React from 'react';
|
|
import { Navigate, Outlet } from 'react-router-dom';
|
|
import { useAuthStore } from '@/store/authStore';
|
|
import ForbiddenPage from '@/pages/errors/ForbiddenPage';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
|
|
interface Props {
|
|
allowedRoles?: string[];
|
|
}
|
|
|
|
const ProtectedRoute: React.FC<Props> = ({ allowedRoles }) => {
|
|
const { isAuthenticated, isInitialized, user } = useAuthStore();
|
|
|
|
if (!isInitialized) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center gap-3 p-8">
|
|
<Skeleton className="h-10 w-10 rounded-full" />
|
|
<Skeleton className="h-4 w-40" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!isAuthenticated) {
|
|
return <Navigate to="/login" replace />;
|
|
}
|
|
|
|
if (allowedRoles && user && !allowedRoles.includes(user.role)) {
|
|
return <ForbiddenPage />;
|
|
}
|
|
|
|
return <Outlet />;
|
|
};
|
|
|
|
export default ProtectedRoute;
|