Remove setLoading and insert visitor for stronger check.

src/api/PrivateRoute/PrivateRoute.tsx

@@ -3,6 +3,7 @@ import axios from 'axios';
 import { Route, Redirect, RouteProps } from 'react-router-dom';
 import { NonAuthRoutes } from 'api/routes';
 import { AuthContext } from 'components/AuthUser/AuthContext';
+import { Roles } from 'api/userRoles';
 
 /**
  * A wrapper for <Route> that redirects to the login screen if you're not yet authenticated.
@@ -22,14 +23,12 @@ export const PrivateRoute = ({
   requiredRoles,
 }: Props): JSX.Element => {
   const [auth, setAuth] = useState<boolean>(false);
-  const [loading, setLoading] = useState<boolean>(false);
   const { role } = useContext(AuthContext);
 
   useEffect(() => {
     const fetch = async (): Promise<unknown> => {
       const result = await axios('/api/web/login/is_authenticated');
       setAuth(result.data.is_authenticated);
-      setLoading(true);
       return null;
     };
     /*
@@ -38,9 +37,8 @@ export const PrivateRoute = ({
     this component state is triggered, falling in unnecessary calls to the
     server.
     */
-    if (role) fetch();
+    if (role !== Roles.visitor) fetch();
   }, [auth]);
-
   const userHasRequiredRole = requiredRoles.includes(role);
   const message = userHasRequiredRole
     ? 'Please log in to view this page'