Redirect to login when 401 or 403

frontend/src/Routes.tsx

@@ -1,13 +1,14 @@
-import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
+import { Router, Switch, Route, Redirect } from 'react-router-dom';
 import Home from 'pages/Home';
 import Navbar from 'components/Navbar';
 import Catalog from 'pages/Catalog';
 import Admin from 'pages/Admin';
 import ProductDetails from 'pages/ProductDetails';
 import Auth from 'pages/Admin/Auth';
+import history from 'util/history';
 
 const Routes = () => (
-  <BrowserRouter>
+  <Router history={history}>
     <Navbar />
     <Switch>
       <Route path="/" exact>
@@ -28,7 +29,7 @@ const Routes = () => (
         <Admin />
       </Route>
     </Switch>
-  </BrowserRouter>
+  </Router>
 );
 
 export default Routes;

frontend/src/util/history.ts

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history'
+
+export default createBrowserHistory()

frontend/src/util/requests.ts

@@ -1,5 +1,6 @@
 import qs from 'qs'
 import axios, { AxiosRequestConfig } from 'axios'
+import history from './history'
 
 type LoginResponse = {
     "access_token": string,
@@ -46,4 +47,20 @@ export const requestBackend = (config: AxiosRequestConfig) => {
         Authorization: "Bearer " + getAuthData().access_token
     } : config.headers;
     return axios({...config, baseURL: BASE_URL, headers})
-}
+}
+
+// Add a request interceptor
+axios.interceptors.request.use(function (config) {
+    return config;
+  }, function (error) {
+    return Promise.reject(error);
+  });
+
+axios.interceptors.response.use(function (response) {
+    return response;
+  }, function (error) {
+    if (error.response.status === 401 || error.response.status === 403) {
+        history.push('/admin/auth')
+    }
+    return Promise.reject(error);
+  });