roles based access error fix

This commit is contained in:
suryac 2026-07-31 12:14:40 +05:30
parent eaf0ee3d63
commit f789794da5
3 changed files with 18 additions and 5 deletions

View File

@ -108,6 +108,6 @@ export const routeConfig = [
{ {
path: "/admin/users", path: "/admin/users",
element: <UsersPage />, element: <UsersPage />,
adminOnly: true, roles: ["Manager", "Admin"],
}, },
]; ];

View File

@ -122,6 +122,15 @@ export function ConsoleLayout() {
<div className="px-4 py-3 border-b border-gray-100 mb-1"> <div className="px-4 py-3 border-b border-gray-100 mb-1">
<p className="text-sm font-bold text-gray-900 truncate">{user?.name || 'User'}</p> <p className="text-sm font-bold text-gray-900 truncate">{user?.name || 'User'}</p>
<p className="text-xs text-gray-500 truncate mt-0.5">{user?.email || 'user@example.com'}</p> <p className="text-xs text-gray-500 truncate mt-0.5">{user?.email || 'user@example.com'}</p>
{userRoles && userRoles.length > 0 && (
<div className="mt-2 flex flex-wrap gap-1">
{userRoles.map(role => (
<span key={role} className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-blue-100 text-blue-800">
{role}
</span>
))}
</div>
)}
</div> </div>
{isAdmin && ( {isAdmin && (
<div className="px-2 pb-1 border-b border-gray-100 mb-1"> <div className="px-2 pb-1 border-b border-gray-100 mb-1">

View File

@ -4,10 +4,11 @@ import { useAuth } from '../auth/context';
import { Button } from '../components/buttons'; import { Button } from '../components/buttons';
import { Card, Input } from '../components/reusable'; import { Card, Input } from '../components/reusable';
import { getDefaultRoute } from '../auth/ProtectedRoute';
/** Login gate. Redirects to /orders once authenticated. */ /** Login gate. Redirects to default route once authenticated. */
export function LoginPage() { export function LoginPage() {
const { authed, login } = useAuth(); const { authed, login, roles, isAdmin } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
@ -15,7 +16,7 @@ export function LoginPage() {
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
if (authed) return <Navigate to="/orders" replace />; if (authed) return <Navigate to={getDefaultRoute(roles, isAdmin)} replace />;
async function submit(e: FormEvent) { async function submit(e: FormEvent) {
e.preventDefault(); e.preventDefault();
@ -23,7 +24,10 @@ export function LoginPage() {
setError(null); setError(null);
try { try {
await login(email, password); await login(email, password);
navigate('/orders', { replace: true });
// Wait for a tick so useAuth state updates (if necessary) or we can just navigate to root
// which will redirect. But since we need the updated roles, navigating to root is safest.
navigate('/', { replace: true });
} catch (err) { } catch (err) {
setError((err as { message?: string })?.message ?? 'Login failed'); setError((err as { message?: string })?.message ?? 'Login failed');
} finally { } finally {