Verificare token

1. Adăugarea endpoint-ului de validare a token-ului în auth.routes.js

// client/src/api/auth.routes.js
import axiosNoAuth from "../axios/axiosNoAuth";
import axiosAuth from "../axios/axiosAuth";

export const loginUser = async (credentials) => {
  try {
    const response = await axiosNoAuth.post('/auth/login', credentials);
    return response.data;
  } catch (error) {
    console.error("Error logging in user:", error);
    return error.response?.data;
  }
};

export const checkToken = async (token) => {
  try {
    const response = await axiosAuth.post('/auth/check', { token });
    return response.data;
  } catch (error) {
    console.error("Token validation failed:", error);
    throw error;
  }
};

Detalii tehnice:

• Endpoint-ul /auth/check este utilizat pentru a verifica dacă token-ul JWT stocat în browser este valid.

• Se folosește axiosAuth, care include automat token-ul în header-ul Authorization.

• Răspunsul așteptat de la server este de forma:

2. Crearea ustom hook-ului useCheckToken pentru verificarea automată a token-ului

// client/src/hooks/useCheckToken.js

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { setToken, setCheckTokenLoading } from '../store/slices/userSlice';
import { checkToken } from '../api/auth.routes';

const useCheckToken = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const validateToken = async () => {
      const token = localStorage.getItem('token');

      if (token) {
        try {
          const response = await checkToken(token);
          
          if (response.success) {
            dispatch(setToken(token));
          }
        } catch (error) {
          console.error('Token validation failed:', error);
          localStorage.removeItem('token');
          dispatch(setToken(null));
          window.location.href = '/login';
        } finally {
          dispatch(setCheckTokenLoading(false));
        }
      } else {
        dispatch(setCheckTokenLoading(false));
      }
    };

    validateToken();
  }, [dispatch]);
};

export default useCheckToken;

Detalii tehnice și bune practici:

• Hook-ul verifică automat dacă un token JWT este stocat în localStorage.

• Dacă token-ul există, se apelează funcția checkToken pentru validare.

• Token valid → se actualizează starea globală Redux cu setToken.

• Token invalid sau absent → token-ul este eliminat din localStorage, starea Redux este resetată și utilizatorul este redirecționat la pagina de login.

• Variabila checkTokenLoading este folosită pentru a controla afișarea unui spinner de încărcare până când validarea se finalizează.

• Utilizarea acestui hook în App.jsx permite protejarea tuturor componentelor copil fără a scrie logica de verificare în fiecare componentă în parte.

3. Modificări în componenta App.jsx pentru integrarea verificării token-ului

// 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 useCheckToken from './hooks/useCheckToken'

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

  if (checkTokenLoading) {
    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>
    )
  }

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

Aspecte importante:

1. Inițializare hook verificare token: useCheckToken() este apelat imediat ce aplicația se încarcă, pentru a verifica token-ul existent și a proteja rutele private.

2. Spinner de încărcare: dacă verificarea token-ului este în curs (checkTokenLoading === true), aplicația afișează un loader centrat pe ecran.

3. Protecția componentelor: după finalizarea verificării, Navbar, Toaster și componenta corespunzătoare rutei curente (<Outlet />) sunt afișate.

4. Redirecționare automată: token invalid → utilizator redirecționat automat la /login.