Protected Pages Show Blank Screen Instead of Redirecting to Login

packages/volto/src/helpers/Api/Api.js

@@ -126,7 +126,9 @@ class Api {
                 url: err.response.headers.location,
               });
             }
-
+            if (response.status === 401) {
+              window.location.href = '/login';
+            }
             return err ? reject(err) : resolve(response.body || response.text);
           });
         });

packages/volto/src/protected-routes.jsx

@@ -0,0 +1,24 @@
+import { useSelector } from 'react-redux';
+import { Route, Redirect } from 'react-router-dom';
+
+export const ProtectedRoutes = ({ component: Component, ...rest }) => {
+  const token = useSelector((state) => state.userSession.token);
+
+  return (
+    <Route
+      {...rest}
+      render={(props) =>
+        token ? (
+          <Component {...props} />
+        ) : (
+          <Redirect
+            to={{
+              pathname: '/login',
+              state: { from: props.location },
+            }}
+          />
+        )
+      }
+    />
+  );
+};

packages/volto/src/routes.js

@@ -56,6 +56,7 @@ import App from '@plone/volto/components/theme/App/App';
 import View from '@plone/volto/components/theme/View/View';
 
 import config from '@plone/volto/registry';
+import { ProtectedRoutes } from './protected-routes';
 
 /**
  * Default routes array.
@@ -232,7 +233,10 @@ export const defaultRoutes = [
   },
   {
     path: '/controlpanel/:id',
-    component: Controlpanel,
+    component: (props) => (
+      // eslint-disable-next-line
+      <ProtectedRoutes component={Controlpanel} {...props} />
+    ),
   },
   {
     path: '/change-password',