diff --git a/webapp/src/router/index.ts b/webapp/src/router/index.ts
index ca49938..eb81a01 100644
--- a/webapp/src/router/index.ts
+++ b/webapp/src/router/index.ts
@@ -103,20 +103,4 @@ const router = createRouter({
 ]
 });
 
-router.beforeEach((to, from, next) => {
-    // redirect to login page if not logged in and trying to access a restricted page
-    const publicPages = ['/', '/login', '/about', '/info/network', '/info/system', '/info/ntp', '/info/mqtt', ];
-    const authRequired = !publicPages.includes(to.path);
-    const loggedIn = localStorage.getItem('user');
-
-    if (authRequired && !loggedIn) {
-        return next({
-            path: '/login',
-            query: { returnUrl: to.path }
-        });
-    }
-
-    next();
-});
-
 export default router;
\ No newline at end of file
diff --git a/webapp/src/utils/authentication.ts b/webapp/src/utils/authentication.ts
index 6d8276c..0bcb178 100644
--- a/webapp/src/utils/authentication.ts
+++ b/webapp/src/utils/authentication.ts
@@ -1,17 +1,19 @@
 import type { Emitter, EventType } from "mitt";
+import type { Router } from "vue-router";
 
 export function authHeader(): Headers {
     // return authorization header with basic auth credentials
-    let user = JSON.parse(localStorage.getItem('user') || "");
+    let user = null;
+    try {
+        user = JSON.parse(localStorage.getItem('user') || "");
+    } catch { }
 
+    const headers = new Headers();
+    headers.append('X-Requested-With', 'XMLHttpRequest');
     if (user && user.authdata) {
-        const headers = new Headers();
         headers.append('Authorization', 'Basic ' + user.authdata);
-        headers.append('X-Requested-With', 'XMLHttpRequest')
-        return new Headers(headers);
-    } else {
-        return new Headers();
     }
+    return new Headers(headers);
 }
 
 export function logout() {
@@ -47,7 +49,7 @@ export function login(username: String, password: String) {
         });
 }
 
-export function handleResponse(response: Response, emitter: Emitter<Record<EventType, unknown>>) {
+export function handleResponse(response: Response, emitter: Emitter<Record<EventType, unknown>>, router: Router) {
     return response.text().then(text => {
         const data = text && JSON.parse(text);
         if (!response.ok) {
@@ -55,7 +57,7 @@ export function handleResponse(response: Response, emitter: Emitter<Record<Event
                 // auto logout if 401 response returned from api
                 logout();
                 emitter.emit("logged-out");
-                location.reload();
+                router.push({path: "/login", query: { returnUrl: router.currentRoute.value.fullPath }});
             }
 
             const error = (data && data.message) || response.statusText;
diff --git a/webapp/src/views/ConfigAdminView.vue b/webapp/src/views/ConfigAdminView.vue
index 479c717..7405cbe 100644
--- a/webapp/src/views/ConfigAdminView.vue
+++ b/webapp/src/views/ConfigAdminView.vue
@@ -156,7 +156,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/DtuAdminView.vue b/webapp/src/views/DtuAdminView.vue
index e23ba40..802def3 100644
--- a/webapp/src/views/DtuAdminView.vue
+++ b/webapp/src/views/DtuAdminView.vue
@@ -79,7 +79,7 @@ export default defineComponent({
         getDtuConfig() {
             this.dataLoading = true;
             fetch("/api/dtu/config", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (data) => {
                         this.dtuConfigList = data;
@@ -98,7 +98,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 0d5c65f..1256f16 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -463,8 +463,8 @@ export default defineComponent({
         isLoggedIn,
         getInitialData() {
             this.dataLoading = true;
-            fetch("/api/livedata/status")
-                .then((response) => response.json())
+            fetch("/api/livedata/status", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.liveData = data;
                     this.dataLoading = false;
@@ -526,8 +526,8 @@ export default defineComponent({
         },
         onShowEventlog(serial: number) {
             this.eventLogLoading = true;
-            fetch("/api/eventlog/status?inv=" + serial)
-                .then((response) => response.json())
+            fetch("/api/eventlog/status?inv=" + serial, { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.eventLogList = data[serial];
                     this.eventLogLoading = false;
@@ -540,8 +540,8 @@ export default defineComponent({
         },
         onShowDevInfo(serial: number) {
             this.devInfoLoading = true;
-            fetch("/api/devinfo/status")
-                .then((response) => response.json())
+            fetch("/api/devinfo/status", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.devInfoList = data[serial][0];
                     this.devInfoLoading = false;
@@ -559,8 +559,8 @@ export default defineComponent({
             this.targetLimitTypeText = "Relative (%)";
 
             this.limitSettingLoading = true;
-            fetch("/api/limit/status")
-                .then((response) => response.json())
+            fetch("/api/limit/status", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.currentLimitList = data[serial];
                     this.targetLimitList.serial = serial;
@@ -583,7 +583,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (response) => {
                         if (response.type == "success") {
@@ -614,8 +614,8 @@ export default defineComponent({
 
         onShowPowerSettings(serial: number) {
             this.powerSettingLoading = true;
-            fetch("/api/power/status")
-                .then((response) => response.json())
+            fetch("/api/power/status", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.successCommandPower = data[serial].power_set_status;
                     this.powerSettingSerial = serial;
@@ -653,7 +653,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (response) => {
                         if (response.type == "success") {
diff --git a/webapp/src/views/InverterAdminView.vue b/webapp/src/views/InverterAdminView.vue
index 981642e..47f0585 100644
--- a/webapp/src/views/InverterAdminView.vue
+++ b/webapp/src/views/InverterAdminView.vue
@@ -207,7 +207,7 @@ export default defineComponent({
         getInverters() {
             this.dataLoading = true;
             fetch("/api/inverter/list", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.inverters = data.inverter;
                     this.dataLoading = false;
@@ -222,7 +222,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.getInverters();
                     this.alert = data;
diff --git a/webapp/src/views/MaintenanceRebootView.vue b/webapp/src/views/MaintenanceRebootView.vue
index 0806ebd..5d8d415 100644
--- a/webapp/src/views/MaintenanceRebootView.vue
+++ b/webapp/src/views/MaintenanceRebootView.vue
@@ -78,7 +78,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.alertMessage = data.message;
                     this.alertType = data.type;
diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue
index 7694129..b905aaf 100644
--- a/webapp/src/views/MqttAdminView.vue
+++ b/webapp/src/views/MqttAdminView.vue
@@ -242,7 +242,7 @@ export default defineComponent({
         getMqttConfig() {
             this.dataLoading = true;
             fetch("/api/mqtt/config", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.mqttConfigList = data;
                     this.dataLoading = false;
@@ -259,7 +259,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index 2f20f46..43cc233 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -149,6 +149,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { handleResponse, authHeader } from '@/utils/authentication';
 import BasePage from '@/components/BasePage.vue';
 import type { MqttStatus } from '@/types/MqttStatus';
 
@@ -168,8 +169,8 @@ export default defineComponent({
     methods: {
         getMqttInfo() {
             this.dataLoading = true;
-            fetch("/api/mqtt/status")
-                .then((response) => response.json())
+            fetch("/api/mqtt/status", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.mqttDataList = data;
                     this.dataLoading = false;
diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue
index 235869c..cfe60c8 100644
--- a/webapp/src/views/NetworkAdminView.vue
+++ b/webapp/src/views/NetworkAdminView.vue
@@ -128,7 +128,7 @@ export default defineComponent({
         getNetworkConfig() {
             this.dataLoading = true;
             fetch("/api/network/config", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.networkConfigList = data;
                     this.dataLoading = false;
@@ -145,7 +145,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/NetworkInfoView.vue b/webapp/src/views/NetworkInfoView.vue
index 29becd5..cfa92ac 100644
--- a/webapp/src/views/NetworkInfoView.vue
+++ b/webapp/src/views/NetworkInfoView.vue
@@ -13,6 +13,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { handleResponse, authHeader } from '@/utils/authentication';
 import BasePage from '@/components/BasePage.vue';
 import WifiStationInfo from "@/components/WifiStationInfo.vue";
 import WifiApInfo from "@/components/WifiApInfo.vue";
@@ -40,8 +41,8 @@ export default defineComponent({
     methods: {
         getNetworkInfo() {
             this.dataLoading = true;
-            fetch("/api/network/status")
-                .then((response) => response.json())
+            fetch("/api/network/status", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.networkDataList = data;
                     this.dataLoading = false;
diff --git a/webapp/src/views/NtpAdminView.vue b/webapp/src/views/NtpAdminView.vue
index be6a13e..ce18c79 100644
--- a/webapp/src/views/NtpAdminView.vue
+++ b/webapp/src/views/NtpAdminView.vue
@@ -129,7 +129,7 @@ export default defineComponent({
         getNtpConfig() {
             this.dataLoading = true;
             fetch("/api/ntp/config", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (data) => {
                         this.ntpConfigList = data;
@@ -144,7 +144,7 @@ export default defineComponent({
         getCurrentTime() {
             this.dataLoading = true;
             fetch("/api/ntp/time", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (data) => {
                         this.mcuTime = new Date(
@@ -172,7 +172,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
@@ -195,7 +195,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/NtpInfoView.vue b/webapp/src/views/NtpInfoView.vue
index aa2f2ec..a9b69be 100644
--- a/webapp/src/views/NtpInfoView.vue
+++ b/webapp/src/views/NtpInfoView.vue
@@ -54,6 +54,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { handleResponse, authHeader } from '@/utils/authentication';
 import BasePage from '@/components/BasePage.vue';
 import type { NtpStatus } from "@/types/NtpStatus";
 
@@ -73,8 +74,8 @@ export default defineComponent({
     methods: {
         getNtpInfo() {
             this.dataLoading = true;
-            fetch("/api/ntp/status")
-                .then((response) => response.json())
+            fetch("/api/ntp/status", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.ntpDataList = data;
                     this.dataLoading = false;
diff --git a/webapp/src/views/SecurityAdminView.vue b/webapp/src/views/SecurityAdminView.vue
index b4aae34..9f5aa90 100644
--- a/webapp/src/views/SecurityAdminView.vue
+++ b/webapp/src/views/SecurityAdminView.vue
@@ -67,7 +67,7 @@ export default defineComponent({
         getPasswordConfig() {
             this.dataLoading = true;
             fetch("/api/security/password", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (data) => {
                         this.securityConfigList = data;
@@ -94,7 +94,7 @@ export default defineComponent({
                 headers: authHeader(),
                 body: formData,
             })
-                .then((response) => handleResponse(response, this.$emitter))
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then(
                     (response) => {
                         this.alertMessage = response.message;
diff --git a/webapp/src/views/SystemInfoView.vue b/webapp/src/views/SystemInfoView.vue
index 5ae8ee7..8d2fc1f 100644
--- a/webapp/src/views/SystemInfoView.vue
+++ b/webapp/src/views/SystemInfoView.vue
@@ -13,6 +13,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { handleResponse, authHeader } from '@/utils/authentication';
 import BasePage from '@/components/BasePage.vue';
 import HardwareInfo from "@/components/HardwareInfo.vue";
 import FirmwareInfo from "@/components/FirmwareInfo.vue";
@@ -40,8 +41,8 @@ export default defineComponent({
     methods: {
         getSystemInfo() {
             this.dataLoading = true;
-            fetch("/api/system/status")
-                .then((response) => response.json())
+            fetch("/api/system/status", { headers: authHeader() })
+                .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.systemDataList = data;
                     this.dataLoading = false;