Fajna aplikacja. Rzuciło mi się w oczy, że sprawdzasz role w komponentach. To można spokojnie przenieść warstwę wyżej do ustawień routingu.
useEffect(() => {
if((userDetails.token !== "") && (userDetails.roles.includes("ROLE_ADMIN"))){
axios.get(API_URL + '/fuels')
.then((response) => {
if (response.data.length === 0) {
dispatch(showSnackbar("Error occurred while fetching the list of fuel types", false));
//await delay(2000);
navigate('/', {replace: true});
} else {
setFuelList(response.data);
}
})
.catch(async (error) => {
console.log(error);
dispatch(showSnackbar("Error occurred while fetching the list of fuel types", false));
// await delay(5000);
navigate('/', {replace: true});
})
} else {
navigate('/', { replace: true });
}
}, [userDetails.token]);
Według mnie możesz to poprawić dzięki temu artykułowi -> https://blog.logrocket.com/authentication-react-router-v6/#creating-protected-routes
Zauważyłem, że używasz axiosa. Możesz go sobie skonfigurować np. w src/lib/axios.js
import Axios from "axios";
const API_URL = process.env.REACT_APP_API_URL;
export const axios = Axios.create({
baseURL: API_URL,
});
axios.interceptors.response.use((response) => response.data);
A tutaj przykładowy hook, który dodaje header oraz usuwa dane użytkownika, jeżeli api zwróciło status 401:
import { axios } from "lib/axios";
import { useEffect } from "react";
import storage from "utils/storage";
import { useAuth } from "./useAuth";
const useAuthInterceptors = () => {
const { userData, setUserData } = useAuth();
useEffect(() => {
const requestInterceptor = axios.interceptors.request.use(
(config) => {
if (!config.headers) {
config.headers = {};
}
if (!config.headers?.["Authorization"]) {
config.headers["Authorization"] = `Bearer ${userData?.token}`;
}
return config;
},
(error) => Promise.reject(error)
);
const responseInterceptor = axios.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
setUserData(null);
storage.clearUserData();
}
return Promise.reject(error);
}
);
return () => {
axios.interceptors.request.eject(requestInterceptor);
axios.interceptors.response.eject(responseInterceptor);
};
}, [userData, setUserData]);
};
export default useAuthInterceptors;