Thiết kế website giá rẻ

Question

My RequireAuth is a route protector. However, upon trying to visit one of the protected routes, it ends up causing an infinite loop, flooding my console.

This is my route protector.

import { Navigate, Outlet, useLocation } from "react-router-dom";
import useAuth from "../hooks/useAuth";
import axios from "../api/axios";
import { useEffect, useState } from "react";

const RequireAuth = ({allowedRole}) => {
    const { getRole, getUser, getToken } = useAuth();
    const location = useLocation();

    const [isAuthenticated, setIsAuthenticated] = useState(false);

    useEffect(() => {
        
        const token = getToken(); 
        const verifyToken = async () => {

            try {
                const response = await axios.get("/api/verifyToken", {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                });

                setIsAuthenticated(response.data.valid);
            } catch (error) {
                console.error("Error verifying token:", error);
            }
        };

        verifyToken();
    }, []);


    return isAuthenticated ? (
    allowedRole?.includes(getRole()) ? (
      <Outlet />
    ) : getUser() ? (<Navigate to="/unauthorized" state={{ from: location }} replace />) 
                  : (<Navigate to="/login" state={{ from: location }} replace />)
    ) : (
    <Navigate to="/login" state={{ from: location }} replace />
    );
}

export default RequireAuth;

This is my getToken method

const getToken = () => {
        console.log('getting token');
        return auth ? auth?.token : null;
    };

this is the error i am getting in my console

AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
RequireAuth.js:18 
        
        
       GET http://localhost:3500/api/verifyToken 403 (Forbidden)
dispatchXhrRequest @ xhr.js:188
xhr @ xhr.js:15
dispatchRequest @ dispatchRequest.js:51
_request @ Axios.js:173
request @ Axios.js:40
Axios.<computed> @ Axios.js:199
wrap @ bind.js:5
verifyToken @ RequireAuth.js:18
(anonymous) @ RequireAuth.js:30
commitHookEffectListMount @ react-dom.development.js:23189
commitPassiveMountOnFiber @ react-dom.development.js:24965
commitPassiveMountEffects_complete @ react-dom.development.js:24930
commitPassiveMountEffects_begin @ react-dom.development.js:24917
commitPassiveMountEffects @ react-dom.development.js:24905
flushPassiveEffectsImpl @ react-dom.development.js:27078
flushPassiveEffects @ react-dom.development.js:27023
(anonymous) @ react-dom.development.js:26808
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 18 more frames
Show less

Understand this error

AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
AuthProvider.js:49 getting token
react-dom.development.js:86 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at Navigate (http://localhost:3000/static/js/bundle.js:74588:5)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:74023:5)
    at Outlet (http://localhost:3000/static/js/bundle.js:74627:26)
    at div
    at div
    at Layout
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:74023:5)
    at Routes (http://localhost:3000/static/js/bundle.js:74714:5)
    at App (http://localhost:3000/static/js/bundle.js:53:66)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:74023:5)
    at Routes (http://localhost:3000/static/js/bundle.js:74714:5)
    at AuthProvider (http://localhost:3000/static/js/bundle.js:4232:3)
    at Router (http://localhost:3000/static/js/bundle.js:74648:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:72601:5)

Here are some other errors that appear in the sea of other errors:

Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection

Failed to load resource: the server responded with a status of 403 ()

Error verifying token: AxiosError

I have tried adding logging statements to my backend, and realise the request is not even being received by the backend for some reason as the logging statements are not appearing.

Thiết kế website giá rẻ

Danh mục

Why is my useEffect entering an infinite loop despite empty dependency list?