Fix router logic to account for logged out users; closes #4085

Middleware was removed from the `/` route to redirect users without authentication, so now we need to handle this on the front-end properly.

resources/scripts/components/App.tsx

@@ -13,6 +13,8 @@ import tw, { GlobalStyles as TailwindGlobalStyles } from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
 import { history } from '@/components/history';
 import { setupInterceptors } from '@/api/interceptors';
+import AuthenticatedRoute from '@/components/elements/AuthenticatedRoute';
+import { ServerContext } from '@/state/server';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
@@ -60,10 +62,20 @@ const App = () => {
                 <div css={tw`mx-auto w-auto`}>
                     <Router history={history}>
                         <Switch>
-                            <Route path="/server/:id" component={ServerRouter}/>
-                            <Route path="/auth" component={AuthenticationRouter}/>
-                            <Route path="/" component={DashboardRouter}/>
-                            <Route path={'*'} component={NotFound}/>
+                            <Route path={'/auth'}>
+                                <AuthenticationRouter/>
+                            </Route>
+                            <AuthenticatedRoute path={'/server/:id'}>
+                                <ServerContext.Provider>
+                                    <ServerRouter/>
+                                </ServerContext.Provider>
+                            </AuthenticatedRoute>
+                            <AuthenticatedRoute path={'/'}>
+                                <DashboardRouter/>
+                            </AuthenticatedRoute>
+                            <Route path={'*'}>
+                                <NotFound/>
+                            </Route>
                         </Switch>
                     </Router>
                 </div>

resources/scripts/components/elements/AuthenticatedRoute.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Redirect, Route, RouteProps } from 'react-router';
+import { useStoreState } from '@/state/hooks';
+
+export default ({ children, ...props }: Omit<RouteProps, 'render'>) => {
+    const isAuthenticated = useStoreState(state => !!state.user.data?.uuid);
+
+    return (
+        <Route
+            {...props}
+            render={({ location }) => (
+                isAuthenticated ? children : <Redirect to={{ pathname: '/auth/login', state: { from: location } }}/>
+            )}
+        />
+    );
+};