From 6ee5893e94341c38dae562d5c8c5209a816ebf98 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Thu, 15 Apr 2021 09:19:12 +0200
Subject: [PATCH] Implement account based route
---
src/App.tsx | 9 +++++++--
.../api/PrivateRoute/PrivateRoute.tsx | 17 ++++++++++++++---
src/components/api/routes.ts | 10 +++++++++-
3 files changed, 30 insertions(+), 6 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 0a7b221..191f80b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,14 +5,19 @@ import { AuthUser } from 'components/AuthUser/AuthUser';
import { LandingPage } from 'components/LandingPage/LandingPage';
import { PrivateRoute } from 'components/api/PrivateRoute/PrivateRoute';
import { AuthRoutes, NonAuthRoutes } from 'components/api/routes';
+import { Roles } from 'components/api/userRoles';
export const App: FC = () => (
<Router>
<div data-testid="App">
<Switch>
- <Route path={NonAuthRoutes.login} component={AuthUser} />
+ <Route path={NonAuthRoutes.signIn} component={AuthUser} />
<Route exact path={NonAuthRoutes.home} component={LandingPage} />
- <PrivateRoute path={AuthRoutes.dashboard} Component={HomePage} />
+ <PrivateRoute
+ path={AuthRoutes.dashboard}
+ Component={HomePage}
+ requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+ />
</Switch>
</div>
</Router>
diff --git a/src/components/api/PrivateRoute/PrivateRoute.tsx b/src/components/api/PrivateRoute/PrivateRoute.tsx
index 89c5962..e313633 100644
--- a/src/components/api/PrivateRoute/PrivateRoute.tsx
+++ b/src/components/api/PrivateRoute/PrivateRoute.tsx
@@ -9,12 +9,21 @@ import { NonAuthRoutes } from 'components/api/routes';
type Props = {
Component: React.FC<RouteProps>;
path: string;
+ requiredRoles: string[];
};
/* eslint-disable react/jsx-props-no-spreading */
-export const PrivateRoute = ({ Component, path }: Props): JSX.Element => {
+export const PrivateRoute = ({
+ Component,
+ path,
+ requiredRoles,
+}: Props): JSX.Element => {
const isAuthed = false;
- const message = 'Please log in to view this page';
+ const userHasRequiredRole = requiredRoles.includes('admin');
+
+ const message = userHasRequiredRole
+ ? 'Please log in to view this page'
+ : 'Your role is not allowed';
return (
<Route
exact={false}
@@ -25,7 +34,9 @@ export const PrivateRoute = ({ Component, path }: Props): JSX.Element => {
) : (
<Redirect
to={{
- pathname: NonAuthRoutes.login,
+ pathname: userHasRequiredRole
+ ? NonAuthRoutes.signIn
+ : NonAuthRoutes.unauthorized,
state: {
message,
requestedPath: path,
diff --git a/src/components/api/routes.ts b/src/components/api/routes.ts
index 52ee598..e06d35e 100644
--- a/src/components/api/routes.ts
+++ b/src/components/api/routes.ts
@@ -1,10 +1,18 @@
+/**
+ * Allowed routes for authenticated users.
+ * Routes must be defined there and then reused across components
+ * importing AuthRoutes and NonAuthRoutes
+ */
export enum AuthRoutes {
dashboard = '/dashboard',
account = '/account',
}
+/**
+ * Allowed routes for non authenticated users
+ */
export enum NonAuthRoutes {
home = '/',
- login = '/login',
+ signIn = '/signIn',
unauthorized = '/unauthorized',
}
--
GitLab