From ae51728182ac362b10c9f7c4a9a31d5b8548decc Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Wed, 5 May 2021 09:49:07 +0200
Subject: [PATCH] Move cookie fetch to App
---
src/App.tsx | 69 +++++++++++++++++++++++++++++++++++------------------
1 file changed, 46 insertions(+), 23 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 9d1d193..ca7cc5c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { HomePage } from 'components/HomePage/HomePage';
import { AuthUser } from 'components/AuthUser/AuthUser';
@@ -9,26 +9,49 @@ import { NotFound } from 'components/NotFound/NotFound';
import { ProfilePage } from 'components/ProfilePage/ProfilePage';
import { Roles } from 'components/api/userRoles';
import { Unauthorized } from 'components/Unauthorized/Unauthorized';
+import axios from 'axios';
-export const App: FC = () => (
- <Router>
- <div data-testid="App">
- <Switch>
- <Route path={NonAuthRoutes.auth} component={AuthUser} />
- <Route exact path={NonAuthRoutes.home} component={LandingPage} />
- <PrivateRoute
- path={AuthRoutes.dashboard}
- Component={HomePage}
- requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
- />
- <PrivateRoute
- path={AuthRoutes.profile}
- Component={ProfilePage}
- requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
- />
- <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
- <Route component={NotFound} />
- </Switch>
- </div>
- </Router>
-);
+const configDjangoCookieName = (): void => {
+ axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
+ axios.defaults.xsrfCookieName = 'csrftoken';
+ axios.defaults.withCredentials = true;
+};
+
+export const App: FC = () => {
+ const [isCookieFetched, setisCookieFetched] = useState<string>('');
+ configDjangoCookieName();
+ useEffect(() => {
+ const fetchCookie = async (): Promise<unknown> => {
+ const response = await axios('api/web/csrf');
+ axios.defaults.headers.common['X-CSRFTOKEN'] = response.data.token;
+ sessionStorage.setItem('X-CSRFTOKEN', response.data.token);
+ sessionStorage.setItem('ROLE', 'admin');
+ setisCookieFetched(response.data.token);
+ return null;
+ };
+ if (!isCookieFetched) fetchCookie();
+ }, []);
+
+ return (
+ <Router>
+ <div data-testid="App">
+ <Switch>
+ <Route path={NonAuthRoutes.auth} component={AuthUser} />
+ <Route exact path={NonAuthRoutes.home} component={LandingPage} />
+ <PrivateRoute
+ path={AuthRoutes.dashboard}
+ Component={HomePage}
+ requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+ />
+ <PrivateRoute
+ path={AuthRoutes.profile}
+ Component={ProfilePage}
+ requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+ />
+ <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
+ <Route component={NotFound} />
+ </Switch>
+ </div>
+ </Router>
+ );
+};
--
GitLab