Protejare rute

1. Protejarea rutelor cu ProtectedRoute și AuthRoute

Pentru a organiza mai eficient rutele aplicației, am creat două layout-uri: ProtectedLayout și AuthLayout. Aceasta permite:

• Definirea unui container comun pentru rutele protejate, fără a mai înveli fiecare pagină individual.

• Redirecționarea automată a utilizatorilor în funcție de starea de autentificare (loggedIn) și afișarea unui loading spinner cât timp starea token-ului este verificată (checkTokenLoading).

• Utilizarea componentului <Outlet /> pentru a reda rutele copil în cadrul layout-ului corespunzător.

// client/src/components/ProtectedRoute.jsx
import { useSelector } from 'react-redux';
import { Navigate, Outlet } from 'react-router-dom';
import LoadingSpinner from './LoadingSpinner';

/**
 * ProtectedLayout - Layout for routes that require authentication
 * If the user is not authenticated, redirects to login
 */
export const ProtectedLayout = () => {
  const { loggedIn, checkTokenLoading } = useSelector((state) => state.user);

  if (checkTokenLoading) {
    return <LoadingSpinner />;
  }

  if (!loggedIn) {
    return <Navigate to="/login" replace />;
  }

  return <Outlet />;
};

/**
 * AuthLayout - Layout for routes that require the user to NOT be authenticated
 * If the user is authenticated, redirects to home
 */
export const AuthLayout = () => {
  const { loggedIn, checkTokenLoading } = useSelector((state) => state.user);

  if (checkTokenLoading) {
    return <LoadingSpinner />;
  }

  if (loggedIn) {
    return <Navigate to="/" replace />;
  }

  return <Outlet />;
};

Hints:

• Layout-urile permit definirea mai multor rute protejate sau de autentificare într-un singur bloc în router.

• <Outlet /> reprezintă punctul unde se vor reda toate rutele copil definite în configurația router-ului.

• Această structură face codul mai clar și scalabil pentru aplicații mari.

2. Mutarea Spinner-ului din App.jsx într-o componentă reutilizabilă

Pentru a putea refolosi spinner-ul în mai multe locuri, mutăm spinner-ul din componenta App.jsx într-o componentă dedicată, în cadrul dosarului components, în fișierul LoadingSpinner.jsx.

// client/src/components/LoadingSpinner.jsx

export default function LoadingSpinner() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
    </div>
  );
}

Acum putem merge în componenta App.jsx și să inlocuim spinner-ul hardcodat cu această componentă reutilizabilă.

// client/src/App.jsx
import { Outlet } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { Toaster } from 'sonner'
import Navbar from "./components/Navbar"
import LoadingSpinner from "./components/LoadingSpinner"
import useCheckToken from './hooks/useCheckToken'

export default function App() {
  useCheckToken()
  const checkTokenLoading = useSelector(state => state.user.checkTokenLoading)

  if (checkTokenLoading) {
    return <LoadingSpinner />
  }

  return (
    <>
      <Navbar />
      <Toaster />
      <Outlet />
    </>
  )
}

3. Configurarea rutelor protejate cu React Router

În aplicație, am folosit ProtectedLayout și AuthLayout pentru a organiza rutele în funcție de starea de autentificare a utilizatorului. Aceasta permite definirea clară a routelor care necesită autentificare și a celor care trebuie să fie accesibile doar pentru utilizatorii neautentificați.

• Rutele protejate (ProtectedLayout) includ pagini precum ProductsPage, care pot fi accesate doar dacă utilizatorul este logat.

• Rutele pentru neautentificați (AuthLayout) includ paginile Register și Login, care devin inaccesibile pentru utilizatorii deja autentificați.

• Structura permite adăugarea rapidă a mai multor rute protejate sau de autentificare fără duplicarea codului.

// client/src/router.jsx
import { createBrowserRouter } from "react-router-dom";
import App from "./App";
import HomePage from "./pages/HomePage";
import ProductsPage from "./pages/ProductsPage";
import Register from "./pages/Register";
import Login from "./pages/Login";
import { ProtectedLayout, AuthLayout } from "./components/ProtectedRoute";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: "products",
        element: <ProductsPage />,
      },
      // Protected routes - require authentication
      {
        element: <ProtectedLayout />,
        children: [],
      },
      // Auth routes - require the user to NOT be authenticated
      {
        element: <AuthLayout />,
        children: [
          {
            path: "register",
            element: <Register />,
          },
          {
            path: "login",
            element: <Login />,
          },
        ],
      },
    ],
  },
]);

Hints:

• Fiecare layout (ProtectedLayout / AuthLayout) controlează accesul la rutele copil folosind Outlet.

• Această organizare simplifică scalarea aplicației, deoarece adăugarea de noi rute protejate sau de autentificare se face doar în lista children.

• Redirecturile și afișarea loading-ului sunt gestionate automat de layout-uri, fără a fi nevoie de logica în fiecare componentă de pagină.

4. Actualizarea componentei de Navbar

După ce am reușit să implementăm partea de rutare a aplicației, împreună cu hook-ul de validare al token-ului la refresh și am realizat și protejarea de rute, este necesar să actualizăm și navbarul.

Astfel, trebuie să ne asigurăm că putem face highlight în mod dinamic paginii din navbar pe care ne aflăm și să afișăm în mod dinamic butonul de Sign out/Sign in, dacă utilizatorul este autentificat sau nu.

// client/src/components/Navbar.jsx

import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
import { Bars3Icon, XMarkIcon, UserCircleIcon } from '@heroicons/react/24/outline'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { logout } from '../store/slices/userSlice'
import { classNames } from '../utils/tailwind'

const navigation = [
  { name: 'Homepage', href: '/' },
  { name: 'Products', href: '/products' },
]

export default function Navbar() {
  const location = useLocation()
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const loggedIn = useSelector((state) => state.user.loggedIn)

  const isActive = (href) => {
    return location.pathname === href
  }

  const handleAuthClick = () => {
    if (loggedIn) {
      dispatch(logout())
      navigate('/')
    } else {
      navigate('/login')
    }
  }
  return (
    <Disclosure as="nav" className="relative bg-gray-800">
      <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
        <div className="relative flex h-16 items-center justify-between">
          <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
            {/* Mobile menu button*/}
            <DisclosureButton className="group relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-white/5 hover:text-white focus:outline-2 focus:-outline-offset-1 focus:outline-indigo-500">
              <span className="absolute -inset-0.5" />
              <span className="sr-only">Open main menu</span>
              <Bars3Icon aria-hidden="true" className="block size-6 group-data-open:hidden" />
              <XMarkIcon aria-hidden="true" className="hidden size-6 group-data-open:block" />
            </DisclosureButton>
          </div>
          <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
            <div className="flex shrink-0 items-center">
              <img
                alt="Your Company"
                src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
                className="h-8 w-auto"
              />
            </div>
            <div className="hidden sm:ml-6 sm:block">
              <div className="flex space-x-4">
                {navigation.map((item) => (
                  <Link
                    key={item.name}
                    to={item.href}
                    aria-current={isActive(item.href) ? 'page' : undefined}
                    className={classNames(
                      isActive(item.href) ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-white/5 hover:text-white',
                      'rounded-md px-3 py-2 text-sm font-medium',
                    )}
                  >
                    {item.name}
                  </Link>
                ))}
              </div>
            </div>
          </div>
          <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
            {/* Profile dropdown */}
            <Menu as="div" className="relative ml-3">
              <MenuButton className="relative flex rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">
                <span className="absolute -inset-1.5" />
                <span className="sr-only">Open user menu</span>
                <UserCircleIcon className="size-8 rounded-full bg-gray-800 outline -outline-offset-1 outline-white/10 text-gray-400" />
              </MenuButton>

              <MenuItems
                transition
                className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg outline outline-black/5 transition data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
              >
                <MenuItem>
                  <a
                    href="#"
                    className="block px-4 py-2 text-sm text-gray-700 data-focus:bg-gray-100 data-focus:outline-hidden"
                  >
                    Your profile
                  </a>
                </MenuItem>
                <MenuItem>
                  <a
                    href="#"
                    className="block px-4 py-2 text-sm text-gray-700 data-focus:bg-gray-100 data-focus:outline-hidden"
                  >
                    Settings
                  </a>
                </MenuItem>
                <MenuItem>
                  <button
                    onClick={handleAuthClick}
                    className="block w-full text-left px-4 py-2 text-sm text-gray-700 data-focus:bg-gray-100 data-focus:outline-hidden hover:bg-gray-100"
                  >
                    {loggedIn ? 'Sign out' : 'Sign in'}
                  </button>
                </MenuItem>
              </MenuItems>
            </Menu>
          </div>
        </div>
      </div>

      <DisclosurePanel className="sm:hidden">
        <div className="space-y-1 px-2 pt-2 pb-3">
          {navigation.map((item) => (
            <DisclosureButton
              key={item.name}
              as="a"
              href={item.href}
              aria-current={isActive(item.href) ? 'page' : undefined}
              className={classNames(
                isActive(item.href) ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-white/5 hover:text-white',
                'block rounded-md px-3 py-2 text-base font-medium',
              )}
            >
              {item.name}
            </DisclosureButton>
          ))}
        </div>
      </DisclosurePanel>
    </Disclosure>
  )
}