Redirect when received a 401 error

src/static/app/src/router/index.js

@@ -4,20 +4,16 @@ import Index from "@/views/index.vue"
 import Signin from "@/views/signin.vue";
 import ConfigurationList from "@/components/configurationList.vue";
 import {fetchGet} from "@/utilities/fetch.js";
-import {wgdashboardStore} from "@/stores/wgdashboardStore.js";
 import Settings from "@/views/settings.vue";
 import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStore.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 import Setup from "@/views/setup.vue";
 import NewConfiguration from "@/views/newConfiguration.vue";
 import Configuration from "@/views/configuration.vue";
-import PeerSettings from "@/components/configurationComponents/peerSettings.vue";
 import PeerList from "@/components/configurationComponents/peerList.vue";
 import PeerCreate from "@/components/configurationComponents/peerCreate.vue";
-import RestrictedPeers from "@/components/configurationComponents/restrictedPeers.vue";
 import Ping from "@/views/ping.vue";
 import Traceroute from "@/views/traceroute.vue";
-import PeerJobs from "@/components/configurationComponents/peerJobs.vue";
 
 const checkAuth = async () => {
   let result = false
@@ -30,6 +26,7 @@ const checkAuth = async () => {
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
+    
     {
       name: "Index",
       path: '/',
@@ -90,7 +87,6 @@ const router = createRouter({
               path: 'create',
               component: PeerCreate
             },
-            
           ]
         },
         
@@ -136,9 +132,10 @@ router.beforeEach(async (to, from, next) => {
     }else{
       dashboardConfigurationStore.Redirect = to;
       next("/signin")
+      dashboardConfigurationStore.newMessage("WGDashboard", "Session Ended", "warning")
     }
   }else {
     next();
   }
 });
-export default router
+export default router

src/static/app/src/utilities/fetch.js

@@ -1,3 +1,5 @@
+import router from "@/router/index.js";
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 export const fetchGet = async (url, params=undefined, callback=undefined) => {
 	const urlSearchParams = new URLSearchParams(params);
 	await fetch(`${url}?${urlSearchParams.toString()}`, {
@@ -5,14 +7,22 @@ export const fetchGet = async (url, params=undefined, callback=undefined) => {
 			"content-type": "application/json"
 		}
 	})
-		.then(x => x.json())
-		.then(x => callback ? callback(x) : undefined)
-		.catch(x => {
-			// let router = useRouter()
-			// if (x.status === 401){
-			// 	router.push('/signin')
-			// }
-		})
+	.then((x) => {
+		const store = DashboardConfigurationStore();
+		if (!x.ok){
+			if (x.status !== 200){
+				if (x.status === 401){
+					router.push({path: '/signin'})
+					store.newMessage("WGDashboard", "Session Ended", "warning")
+				}
+				throw new Error(x.statusText)
+			}
+		}else{
+			return x.json()
+		}
+	}).then(x => callback ? callback(x) : undefined).catch(x => {
+		console.log(x)
+	})
 }
 
 export const fetchPost = async (url, body, callback) => {
@@ -22,10 +32,20 @@ export const fetchPost = async (url, body, callback) => {
 		},
 		method: "POST",
 		body: JSON.stringify(body)
+	}).then((x) => {
+		const store = DashboardConfigurationStore();
+		if (!x.ok){
+			if (x.status !== 200){
+				if (x.status === 401){
+					router.push({path: '/signin'})
+					store.newMessage("WGDashboard", "Session Ended", "warning")
+				}
+				throw new Error(x.statusText)
+			}
+		}else{
+			return x.json()
+		}
+	}).then(x => callback ? callback(x) : undefined).catch(x => {
+		console.log(x)
 	})
-		.then(x => x.json())
-		.then(x => callback ? callback(x) : undefined)
-	// .catch(() => {
-	// 	alert("Error occurred! Check console")
-	// });
 }

src/static/app/src/views/signin.vue

@@ -1,9 +1,11 @@
 <script>
 import {fetchGet, fetchPost} from "../utilities/fetch.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
+import Message from "@/components/messageCentreComponent/message.vue";
 
 export default {
 	name: "signin",
+	components: {Message},
 	async setup(){
 		const store = DashboardConfigurationStore()
 		let theme = ""
@@ -26,6 +28,11 @@ export default {
 			loading: false
 		}
 	},
+	computed: {
+		getMessages(){
+			return this.store.Messages.filter(x => x.show)
+		}
+	},
 	methods: {
 		async auth(){
 			if (this.username && this.password && ((this.totpEnabled && this.totp) || !this.totpEnabled)){
@@ -125,6 +132,12 @@ export default {
 			WGDashboard v4.0 | Developed with ❤️ by 
 			<a href="https://github.com/donaldzou" target="_blank"><strong>Donald Zou</strong></a>
 		</small>
+		<div class="messageCentre text-body position-absolute end-0 margin-3">
+			<TransitionGroup name="message" tag="div" class="position-relative">
+				<Message v-for="m in getMessages.slice().reverse()"
+				         :message="m" :key="m.id"></Message>
+			</TransitionGroup>
+		</div>
 	</div>
 </template>