The solution which ultimately worked best for my organization is detailed below, it just adds a check on render for the sysadmin route and redirects the user to a different main path of the application if they are not allowed to be in the page.
SysAdminRoute.tsx
import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';
import AuthService from '../services/AuthService';
import { appSectionPageUrls } from './appSectionPageUrls';
interface IProps extends RouteProps {}
export const SysAdminRoute = (props: IProps) => {
var authService = new AuthService();
if (!authService.getIsSysAdmin()) { //example
authService.logout();
return (<Redirect to={{
pathname: appSectionPageUrls.site //front-facing
}} />);
}
return (<Route {...props} />);
}
There are 3 main routes for our implementation, the public facing /site, the logged in client /app, and sys admin tools at /sysadmin. You get redirected based on your 'authiness' and this is the page at /sysadmin.
SysAdminNav.tsx
<Switch>
<SysAdminRoute exact path={sysadminUrls.someSysAdminUrl} render={() => <SomeSysAdminUrl/> } />
//etc
</Switch>