diff --git a/src/api/PrivateRoute/PrivateRoute.tsx b/src/api/PrivateRoute/PrivateRoute.tsx index d6fbe0b1a00524f92ccf8c46ea40d0bb4042c7b7..b83511d1f735bae4c735e9f49991241ac2db27fa 100644 --- a/src/api/PrivateRoute/PrivateRoute.tsx +++ b/src/api/PrivateRoute/PrivateRoute.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect, useContext } from 'react'; -import axios from 'axios'; import { Route, Redirect, RouteProps } from 'react-router-dom'; import { NonAuthRoutes } from 'api/routes'; import { AuthContext } from 'components/AuthUser/AuthContext'; @@ -8,7 +7,6 @@ import { AuthContext } from 'components/AuthUser/AuthContext'; * A wrapper for <Route> that redirects to the login screen if you're not yet authenticated. * Every non-public route must be wrapped with this component. * */ - type Props = { Component: React.FC<RouteProps>; path: string; @@ -21,29 +19,11 @@ export const PrivateRoute = ({ path, requiredRoles, }: Props): JSX.Element => { - const [auth, setAuth] = useState<boolean>(false); - const [serverRole, setServerRole] = useState<string>(''); - const { role } = useContext(AuthContext); + const { role, isAuth } = useContext(AuthContext); - useEffect(() => { - const fetch = async (): Promise<void> => { - await axios('/api/web/login/is_authenticated').then((res) => - setAuth(res.data.is_authenticated), - ); - }; + // Check if the role is contained in the roles array (passed as props). + const userHasRequiredRole = requiredRoles.includes(role); - /* - Check if user is logged in. - Avoiding this condition would call is\_authenticated every time - this component state is triggered, falling in unnecessary calls to the - server. - */ - fetch(); - axios('/api/web/login/get_role').then((response) => - setServerRole(response.data.role), - ); - }, [auth]); - const userHasRequiredRole = requiredRoles.includes(serverRole); const message = userHasRequiredRole ? 'Please log in to view this page' : 'Your role is not allowed'; @@ -53,15 +33,14 @@ export const PrivateRoute = ({ exact={false} path={path} render={(props: RouteProps) => - auth && userHasRequiredRole ? ( + isAuth && userHasRequiredRole ? ( <Component {...props} /> ) : ( <Redirect to={{ - pathname: - userHasRequiredRole && auth - ? `${NonAuthRoutes.auth}${NonAuthRoutes.signIn}` - : NonAuthRoutes.unauthorized, + pathname: !userHasRequiredRole + ? `${NonAuthRoutes.auth}${NonAuthRoutes.signIn}` + : NonAuthRoutes.unauthorized, state: { message, requestedPath: path,