Decodificare token

JWT-Decode

1. Instalarea librăriei pentru decodificare token

npm install jwt-decode

2. Crearea unei funcții helper care să ne ajute cu decodificarea token-ului

În cadrul folderului utils, generăm fișierul decodeToken.js care va importa librăria jwt-decode și care va conține logica pentru decodarea token-ului.

// client/src/utils/decodeToken.js
import { jwtDecode } from 'jwt-decode';

export const decodeToken = (token) => {
  try {
    if (!token) return null;
    return jwtDecode(token);
  } catch (error) {
    console.error('Failed to decode token:', error);
    return null;
  }
};

3. Includerea funcției helper pentru token în slice-ul de Redux de la utilizator

Ca să putem folosi funcția care decodifică tokenul, este necesar să importăm funcția helper pe care am creat-o la pasul anterior și să o importăm în slice-ul de Redux pentru user.

Această funcție va fi folosită în metoda de setToken, astfel încât după ce utilizatorul își dă login si primește tokenul pe care încearcă să îl salveze în slice, o să îl și decodifice pentru a salva informațiile legate de utilizator.

// client/src/store/slices/userSlice.js
import { createSlice } from '@reduxjs/toolkit';
import { decodeToken } from '../../utils/decodeToken';

const initialState = {
  loggedIn: false,
  checkTokenLoading: true,
  token: null,
  user: null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
      state.loggedIn = !!action.payload;
      
      if (action.payload) {
        state.user = decodeToken(action.payload);
        console.log(decodeToken(action.payload));
        localStorage.setItem('token', action.payload);
      } else {
        state.user = null;
      }
    },
    logout: (state) => {
      state.loggedIn = false;
      state.token = null;
      state.user = null;
      localStorage.removeItem('token');
    },
    setCheckTokenLoading: (state, action) => {
      state.checkTokenLoading = action.payload;
    },
  },
});

export const { setToken, logout, setCheckTokenLoading } = userSlice.actions;

export default userSlice.reducer;